首页 > 代码库 > 多栏自适应布局
多栏自适应布局
一、两栏自适应，左右栏高度均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空出位置
多栏自适应布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。