我正在尝试创建液体布局,以便网站的左侧根据屏幕尺寸扩展,而右侧保持固定宽度。这在IE中运行良好,但在Chrome中,左侧只是扩展了内容的长度,而不是整个空间的长度。
#bbContent{width:100%; min-width:829px;}
#leftActivity
{
float:left;
margin-right:334px;
min-width:421px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:right;
width:320px;
margin:18px 14px 0 -334px;
}
答案 0 :(得分:1)
这是你在找什么?
有意义的是,leftActivity不会展开,因为它是浮动的,如果内容不长那么它就不会展开
编辑:使用Kyomu的小提琴并取出一些东西并重新安排了一些东西
更新:使用基于百分比http://jsfiddle.net/KnVrA/2/
您可以在左侧添加包装器以在右侧创建填充
答案 1 :(得分:0)
我通过在左侧添加一个包装器并从#leftActivity中移除浮动来更正解决方案。在包装器上添加负边距,并从右侧删除负边距。
#leftWrap{float:left; width:100%; min-width:421px; margin-right:-334px;}
#leftActivity
{
margin-right:334px;
margin-top:18px;
padding-left:14px;
padding-right:60px;
overflow:hidden;
}
#rightActivity
{
float:left;
width:320px;
margin:18px 14px 0 0px;
}