display: flex
Flex 布局 最简单的一种方式 ，css3 新增。 父级 div 直接使用 display: flex; 即可 html
<h3>display: flex</h3> <div class="display-flex"> <div class="div-size">1</div> <div class="div-size">2</div> <div class="div-size">3</div> </div>
css
.display-flex { display: flex; } .div-size { border: 1px solid red; width: 200px; height: 120px; margin: 10px; }
float: left
浮动的方式实现水平布局，这种布局方式已经很少用了。（注意设置浮动的元素会影响下面元素的正常排列，设置 clear: both; 即可解决）
html
<h3>float: left</h3> <div> <div class="float-left">4</div> <div class="float-left">5</div> <div class="float-left">6</div> </div> <div class="clear"></div>
css
.float-left { float: left; border: 1px solid yellowgreen; width: 200px; height: 120px; margin: 10px; } .clear { clear: both; }
display:inline-block
行内块元素。（CSS2.1 新增的值）
html
<h3>display: inline-block</h3> <div> <div class="inline-block">7</div> <div class="inline-block">8</div> <div class="inline-block">9</div> </div>
css
.inline-block { display: inline-block; border: 1px solid blue; width: 200px; height: 120px; margin: 10px; }
