我有一个双列流体布局,左侧设置为width: 40%
,右侧隐藏侧设置为width: 60%
。我想允许用户根据自己的喜好大小调整浏览器的大小,但我必须让左侧显示最小宽度300px
。
以下是我目前用于流体布局的代码,其中包含min-width
规范。但是,CSS忽略了它!它允许左侧列缩小到300px
以下。
我还尝试将min-width
设置为百分比,例如20%
,但CSS也会忽略此规范。
div#left {
background: #ccc;
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 40%;
min-width:300px;
height: 100%;
}
div#right {
background: #aaa;
position: fixed;
top: 0;
width:60%;
right: 0;
bottom: 0;
}
jsFiddle全屏示例: http://jsfiddle.net/umgvR/3/embedded/result/
jsFiddle代码: http://jsfiddle.net/umgvR/3/
造成这种情况的原因是什么?如何纠正代码?
答案 0 :(得分:1)
如果你不太注意固定位置,这应该做你想要的。
<div id="left">Left</div><div id="right">Right</div>
注意元素之间缺少空白
html, body {
height: 100%;
}
body {
min-width: 800px;
}
div#left {
background: #ccc;
display: inline-block;
width: 40%;
min-width:300px;
height: 100%;
}
div#right {
background: #aaa;
display: inline-block;
width:60%;
height: 100%;
}
答案 1 :(得分:1)
这也应该有用......
HTML
<div id="container">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
CSS
body, div {width:100%;
height:100%;
margin: 0;
}
#container {
display:block;position: fixed;
}
#left, #right {
display: inline-block;
}
div#left {
background: #ccc;
min-width: 300px;
max-width: 40%;
}
div#right {position:fixed;
background: #aaa;
width: 60%;
}
答案 2 :(得分:0)
我发现左手div保持最小宽度,但它在右边div下面。如果你把它向前推进,你可以在正确的div上看到它。我不认为这是理想的。
z-index: 1;
我使用了z-index:1;在左侧和z-index:0;在右边的div。
它有效,但我认为有更好的解决方案。