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

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

php中文网

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

原创

994人浏览过

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

回复讨论(解决方案)

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

大家都在看：

HTML5代码如何实现文件上传 HTML5代码中File API的运用解析 html头部链接怎么打_html头部链接如何打专业教程 html源码如何保存为静态网页_html源码保存为静态网页的方法 HTML5在线如何优化页面加载速度 HTML5在线性能提升的实用策略如何通过HTML5 Figure元素标注图片的详细步骤