多栏自适应布局
Posted 学如逆水行舟,不进则退。
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多栏自适应布局相关的知识,希望对你有一定的参考价值。
一、两栏自适应,左右栏高度均200px, 左栏宽度自适应,右栏宽度200px
<!--html代码--> <div class="right"></div> <div class="left"></div>
* { margin: 0; padding: 0; } /*方案一*/ .right { width: 200px; height: 200px; background-color: orange; float: right; } .left { height: 200px; background-color: lawngreen; margin-right: 200px; } /*方案二*/ .right { width: 200px; height: 200px; background-color: orange; position: absolute; right: 0; } .left { height: 200px; background-color: lawngreen; margin-right: 200px; }
二、三栏自适应布局,三栏高度均为200px,左右栏宽度均200px,中间一栏宽度自适应
<!--html代码--> <div class="right"></div> <div class="left"></div> <div class="center"></div>
.right, .left, .center { height: 200px; } .right, .left { width: 200px; position: absolute; } .right { right: 0; background-color: red; } .left { left: 0; background-color: green; } .center { background-color: #000; margin-left: 200px; margin-right: 200px; }
总结:
1.html代码中自适应的div必须要放到最后写
2.css代码中通过绝对定位来固定左右,剩下的位置为自适应的div;
3.css代码中自适应的div要设置margin-left或margin-right来为固定的div空出位置
以上是关于多栏自适应布局的主要内容,如果未能解决你的问题,请参考以下文章