如何实现左列宽度自适应设计_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 12:20:31921浏览
如何实现右列宽度固定左列宽度自适应设计
回复讨论(解决方案)
这里有一个jquery制作左边固定宽度右边自适应宽度的div，你要右边固定，就把右边改成左边就行，就是相换，http://www.ablanxue.com/prone_1761_1.html
看不懂jquery 有没有用div+css的啊
引用 2 楼 JQJ007 的回复:引用 1 楼 huanlin08 的回复:这里有一个jquery制作左边固定宽度右边自适应宽度的div，你要右边固定，就把右边改成左边就行，就是相换，http://www.ablanxue.com/prone_1761_1.html
看不懂jquery 有没有用div+css的啊
有啊，看这里：http://www.ab……
左边换右边达不到预期效果啊 无法让右列固定 左边自适应啊
帅哥，头像很有味道啊。
我感觉你可能需要的是这个：
http://bbs.blueidea.com/thread-2818595-1-1.html
.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title></head><body><div style="float:left; height:270px; border:1px solid #000; line-height:22px;">中国中国中国中国中国中国中国中国中国中国<br />中国中国中国中国中国中国中国中国中国中国</div><div style="float:left;width:115px; height:270px; border:1px solid #000;line-height:22px; overflow:hidden;">美国美国</div></body></html>
.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
这个就够了。
.box{
position: relative;
}
.left{
margin-right: 200px;
background: yellow;
}
.right{
position: absolute;
top:0px;
right: 0px;
width: 200px;
background: red;
}
背景颜色只是为了看效果
<div class="right"></div><div class="left"></div><style type="text/css">.left{background:#ff0;height:400px;}.right{float:right;width:250px;background:#f00;height:400px;} </style> 引用 7 楼 stongyann 的回复:
.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
这个就够了。
两列布局，一列浮动宽度固定，另一列宽度%自适应。也就个浮动知识点。
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn