如何实现左列宽度自适应设计_html/css_WEB-ITnose-html教學-PHP中文網

如何实现左列宽度自适应设计_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 12:20:31

原創

912 人瀏覽過

如何实现右列宽度固定左列宽度自适应设计

回复讨论(解决方案)

这里有一个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;}
这个就够了。
两列布局，一列浮动宽度固定，另一列宽度%自适应。也就个浮动知识点。