首页 > 代码库 > CSS两列自适应布局
CSS两列自适应布局
两列布局，一边固定，一边自适应，很常见，可不见得都能写好，就像我。
在一通搜索后，总结了几种方法。
1、CSS3 Flex-Box
其实我最早知道的是这种方法，之前也记录过。
弹性方框模型 (Flexible Box Model)笔记
2、来自div+css自适应两列布局，一列定宽，一列自适应
代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>.main,.sitebar { height: 300px; font: bolder 20px/300px ‘微软雅黑‘; color: #fff; text-align: center;}.main { width: 100%; float: left;}.main .content { margin-left: 200px; background-color: red;}.sitebar { width: 200px; float: left; margin-left: -100%; background-color: green;}</style></head><body><div class="main"> <div class="content">右侧主体自适应区块</div></div><div class="sitebar">左侧定宽200px区块</div></body></html>
效果：
3、来自经典DIV+CSS案例--两列高度自适应
代码：
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>两列高度自适应</title><style type="text/css"> * { margin:0; padding:0; } #main { overflow:hidden; text-align: center; height: 300px; } .sidebar { float:left; width:150px; background:#ff0000; } .content { background:#333333; overflow:hidden; _float:left;/*兼容IE6*/} .row { margin-bottom:-10000px; padding-bottom:10000px;/*内外补丁是关键*/ }</style></head><body><div id="main"> <div class="sidebar row"> 左侧150px </div> <div class="content row"> 右侧自适应 <span style="float:right; font-size:0; position:relative; "> </span> <!--为了万恶的ie6--> </div></div></body></html>
效果：
CSS两列自适应布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。