CSS流体两列和最小宽度

2023年6月17日 211次阅读

我有一个双柱流体布局,左侧设置为宽度：40％,右侧隐藏侧设置为宽度：60％.我想允许用户根据自己的喜好大小调整浏览器的大小,但我必须让左侧显示的最小宽度为300px.

以下是我目前用于流体布局的代码,其中包括最小宽度规范.但是,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/

是什么造成的？如何纠正代码？

最佳答案 如果你不太依赖于固定定位,这应该做你想要的.

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