css display inline-block

html:


<!doctype html>

<html>

<head>

	<meta charset="utf-8">

	<title>title</title>

</head>

<body>

<div class="box1 boxes"></div>

<div class="box2 boxes"></div>

<div class="box3 boxes"></div>

<div class="box4 boxes"></div>

<div class="box5 boxes"></div>

</body>

</html>

css:


.boxes{

    display: inline-block;

    vertical-align: bottom; /* try "bottom" or "top" */

}

.box1{width:150px;height:100px;background-color:red}

.box2{width:130px;height:200px;background-color:blue}

.box3{width:170px;height:190px;background-color:yellow}

.box4{width:200px;height:200px;background-color:purple}

.box5{width:100px;height:100px;background-color:green}

Leave a Comment