三栏布局中间流动(固比固)的实现
Posted 鲁小风lyf
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三栏布局中间流动(固比固)的实现相关的知识,希望对你有一定的参考价值。
1.使用float属性。
css:
.left{ float:left; width:200px; height:100px; background:blue; } .middle{ height:100px; margin:0 200px; background:black; } .right{ float:right; width:200px; height:100px; background:green; }
html:
<body> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </body>
注意middl层的标签位置应写在最后面。
2.使用position属性
css:
.left{ position: absolute; top:0; left:0; width:200px; height:100px; background:blue; } .middle{ height:100px; margin:0 200px; background:black; } .right{ position: absolute; top:0; right:0; width:200px; height:100px; background:green; }
html:
<body> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </body>
3.BFC(块级格式化上下文)
css:
.left{ float:left; width:200px; height:100px; background:blue; } .middle{ height:100px; overflow:hidden;/*触发BFC格式*/ background:black; } .right{ float:right; width:200px; height:100px; background:green; }
html:
<body> <div class="left"></div> <div class="right"></div> <div class="middle"></div> </body>
注意这里的middl层的标签位置也应写在最后面。
BFC是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进行定位,以及与其他元素的关系和相互作用。下表就是成为BFC元素后的特性以及如何成为BFC。
BFC元素最重要的一点就是与外部元素不影响,即碰到浮动元素也不会与其重叠。
以上是关于三栏布局中间流动(固比固)的实现的主要内容,如果未能解决你的问题,请参考以下文章