实现方法:
一、float浮动
<section class='layout float'> <style> .layout.float .left-right-center{ height: 100px; } .layout.float .left{ float: left; width: 300px; background-color: red; } .layout.float .right{ float: right; width: 300px; background-color: blue; } .layout.float .center{ background-color: yellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center">我是中间的自适应元素--浮动</div> </article> </section>
原理:左右两个div由于浮动脱离了文档流,center就会上移,造成三栏布局的效果(前提是高度相同)
优点:兼容性高
缺点:需要清除浮动来防止影响其他元素
如果高度不固定,中间的内容会被撑开,左右两边不会一起撑开
(