基本的dom结构如下:
div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
第一种方式:使用flex布局
div.container{ display: flex; } div.item { flex: 1; height: 100px; background-color: #d71c1c; text-align:center; border:1px solid #dddddd; }
第二种方式:使用width:33.3%来实现
div.container{ height: 100px; overflow: hidden; } div.item{ width: 33.3%; background-color: green; text-align:center; float:left }
第三种方式:使用display:inline-block来布局
div.container{ height: 100px; } div.item { display: inline-block; width: 33.3%; text-align:center; border:1px solid #dd4444; margin-left:-5px; }
第四种方式:使用table-cell来布局
div.container{ display: table; width: 100%; } div.item { display: table-cell; border:1px solid #dddddd; }