我有两个<div>
:左和内容。这两个位于具有min-width:960px;
的包装 div中。 左具有固定宽度,但我希望内容灵活,最小宽度 700px ,如果屏幕较宽,请将其粘贴到屏幕的右边界。
CSS:
#wrapper
{
min-width:960px;
margin-left:auto;
margin-right:auto;
}
#left
{
width:200px;
float:left;
background-color:antiquewhite;
margin-left:10px;
}
#content
{
min-width:700px;
margin-left:10px;
width:auto;
float:left;
background-color:AppWorkspace;
}
JSFiddle:http://jsfiddle.net/Zvt2j/
答案 0 :(得分:10)
您overflow:hidden
可以#content
。写得像这样:
#content
{
min-width:700px;
margin-left:10px;
overflow:hidden;
background-color:AppWorkspace;
}
答案 1 :(得分:5)
你可以使用css3灵活的盒子,它会是这样的:
首先,你的包装器包装了很多东西,所以你需要一个仅用于2个水平浮动盒子的包装器:
<div id="hor-box">
<div id="left">
left
</div>
<div id="content">
content
</div>
</div>
你的css3应该是:
#hor-box{
display: -webkit-box;
display: -moz-box;
display: box;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-orient: horizontal;
}
#left {
width:200px;
background-color:antiquewhite;
margin-left:10px;
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}
#content {
min-width:700px;
margin-left:10px;
background-color:AppWorkspace;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
答案 2 :(得分:2)
#wrapper
{
min-width:960px;
margin-left:auto;
margin-right:auto;
position-relative;
}
#left
{
width:200px;
position: absolute;
background-color:antiquewhite;
margin-left:10px;
z-index: 2;
}
#content
{
padding-left:210px;
width:100%;
background-color:AppWorkspace;
position: relative;
z-index: 1;
}
如果您需要#left
右侧的空白,请将border-right: 10px solid #FFF;
添加到#left
并将10px
添加到padding-left
#content
}}
答案 3 :(得分:1)
CSS auto-fit container between float:left & float:right divs解决了我的问题,谢谢你的评论。
#left
{
width:200px;
float:left;
background-color:antiquewhite;
margin-left:10px;
}
#content
{
overflow:hidden;
margin-left:10px;
background-color:AppWorkspace;
}
答案 4 :(得分:1)
我已更新了您的jsfiddle,以下是您需要执行的CSS更改:
#content
{
min-width:700px;
margin-right: -210px;
width:100%;
float:left;
background-color:AppWorkspace;
}