主体部分
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
第一种 flex布局
.wrapper{ width: 100%; display: flex;//flex弹性布局 } .left{ background: #42B983; width: 33%; height: 100px; } .center{ background: #7E7E7E; width: 33%; height: 100px; } .right{ background: #FC4242; width: 33%; height: 100px; }
第二种 float布局
<style type="text/css"> .wrapper{ width: 100%; } .left{ background: #42B983; width: 33%; height: 100px; float: left; } .center{ background: #7E7E7E; /* //中间栏不需要设置宽度,实际宽度为100% */ /* 33%; */ height: 100px; } .right{ background: #FC4242; width: 33%; height: 100px; float: right; } </style>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<!-- 中间栏要放在最后 -->
<div class="center"></div>
</div>
第三种 position布局
.wrapper{ width: 100%; } .left{ background: #42B983; width: 33%; height: 100px; position: absolute; left: 0; } .center{ background: #7E7E7E; /* 33%; */ height: 100px; position: absolute; left: 33%; right: 33%; } .right{ background: #FC4242; width: 33%; height: 100px; position: absolute; right: 0; }
第四种 table布局
.wrapper{ width: 100%; display: table; } .left{ background: #42B983; width: 33%; height: 100px; display: table-cell; } .center{ background: #7E7E7E; /* 33%; */ height: 100px; display: table-cell; } .right{ background: #FC4242; width: 33%; height: 100px; display: table-cell; }