首页 > 代码库 > 两栏布局，右侧自适应
两栏布局，右侧自适应
总结了一下两栏布局，右侧自适应的方法，欢迎指点和补充~~
方法一：要求right中的子元素不能有固定宽度的（为了IE6），right要加overflow:hidden;
如果right中的内容有固定宽度的浮动元素时，right要加overflow:hidden;，否则当浏览器缩小到right宽度小于里面子元素的宽度时，在非IE67的浏览器中right里的子元素会下移，IE7正常显示；
不论加不加overflow，在IE6中，当浏览器缩小到right宽度小于里面子元素的宽度时，right都会下移。
<style type="text/css">.box01{ padding:10px 0; background:#F2F2F2;}.box01 div{ height:200px;}.box01 .left{ width:200px; float:left; /***/ background:#0FF;}.box01 .right{ background:#396; overflow:hidden; /*不加overflow:hidden时，right里面的内容有固定宽度的，当浏览器缩小时，里面的内容会下移*/}</style><div class="box01"> <div class="left">左侧固定宽度</div> <div class="right"> <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p> 右侧自适应 <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p> </div></div>
方法二：要求right中的子元素不能有固定宽度的（为了IE6），right要加overflow:hidden;
<style type="text/css">.box02{ padding:10px 0; background:#F2F2F2;}.box02 div{ height:200px;}.box02 .left{ width:200px; float:left; /***/ background:#0FF;}.box02 .right{ margin-left:200px; /***/ background:#396; overflow:hidden; /***/}</style><div class="box02"> <div class="left">左侧固定宽度</div> <div class="right"> <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p> 右侧自适应 <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p> </div></div>
方法三：要求right中的子元素不能有固定宽度的（为了IE6），right要加overflow:hidden;
<style type="text/css">.box03{ padding:10px 0; background:#F2F2F2; margin-left:200px; /***/ position:relative;}.box03 div{ height:200px;}.box03 .left{ width:200px; float:left; /***/ margin-left:-200px; /***/ background:#0FF;}.box03 .right{ width:100%; background:#396; overflow:hidden; /***/}</style><div class="box03"> <div class="left">左侧固定宽度</div> <div class="right"> <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p> 右侧自适应 <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p> </div></div>
方法四：right要加overflow:hidden;
<style type="text/css">.box04{ padding:10px 0; background:#F2F2F2; position:relative; /***/}.box04 div{ height:200px;}.box04 .left{ width:200px; background:#0FF; position:absolute; /***/ top:10px; left:0;}.box04 .right{ background:#396; margin-left:200px; /***/ overflow:hidden;}</style><div class="box04"> <div class="left">左侧固定宽度</div> <div class="right"> <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p> 右侧自适应 <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p> </div></div>
方法五：淘宝的做法，不支持IE6
<style type="text/css">.box05{ padding:10px 0; background:#F2F2F2; }.box05 div{ height:200px;}.box05 .left{ width:200px; background:#0FF; float: left; /***/ margin-left: -100%; /***/}.box05 .right_box{ width:100%; float:left; /***/}.box05 .right{ background:#396; margin-left:200px; /***/ overflow:hidden; /***/}</style><div class="box05 clear"> <div class="right_box"> <div class="right"> <p style="width:800px;background:#F00;">有固定宽度的非浮动元素</p> 右侧自适应 <p style="width:800px;background:#F00;float:left;">有固定宽度的浮动元素</p> </div> </div> <div class="left">左侧固定宽度</div></div>
效果很丑，请看图片
两栏布局，右侧自适应
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。