CSS 流体两列和最小宽度答案

【问题标题】：CSS fluid two column and min-widthCSS 流体两列和最小宽度
【发布时间】：2012-12-21 12:10:39
【问题描述】：

我有一个两列的流动布局，左侧设置为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/

这是什么原因造成的？如何更正代码？

【问题讨论】：

当达到左侧的最小宽度时，右侧 div 会发生什么？

标签： css fluid-layout

【解决方案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%;
}

【讨论】：

【解决方案2】：

这也应该有效...

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%;
            }

【讨论】：

【解决方案3】：

我发现左侧 div 保持最小宽度，但它在右侧 div 下方。如果你把它放在前面，你可以在右 div 的顶部看到它。我不认为这是理想的。

 z-index: 1;

我使用 z-index: 1;左右和z-index：0；在右边的 div 上。

它有效，但我认为那里有更好的解决方案。

【讨论】：

我刚刚意识到，当 min-width 起作用时，右手 div 在左手 div 下方。将尝试进一步研究。