CSS流体两列和最小宽度

时间:2012-12-21 03:16:47

标签: css fluid-layout

我有一个双列流体布局,左侧设置为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/

造成这种情况的原因是什么?如何纠正代码?

3 个答案:

答案 0 :(得分:1)

如果你不太注意固定位置,这应该做你想要的。

View on JSFiddle

HTML

<div id="left">Left</div><div id="right">Right</div>

注意元素之间缺少空白

CSS

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。

它有效,但我认为有更好的解决方案。