两栏，左侧固定宽度，右动态宽度

我想实现一个内容，我需要有浏览器的宽度100％的部分，里面我需要在左侧大小与一个div 200px的宽度，在它的权利，我需要有一个具有动态宽度取决于浏览器宽度的div。示例.. browser = 900px - > left div 200px right div 700px。而且两者的div都取决于我有多少信息放在他们..包装DIV将采取最大的2格高度的动态高度..两栏，左侧固定宽度，右动态宽度

到目前为止，我做了这样的事情 HTML

<section id="wrapper"> 
    <div id="list"> 
    </div> 
    <div id="grid"> 
    </div> 
</section>

CSS

#wrapper { 
    width: 100%; 
    min-width: 1000px; 
    margin: 0 auto; 
    padding: 40px 0; 
    overflow: hidden; 
}

现在我需要的CSS #list和#grid的div。我希望有一种有效的解决方案，这是因为后来我也会有同样的东西#grid DIV :)

谢谢你在前进，丹尼尔里面做！

来源

2012-08-01 Pacuraru Daniel

你可以用CSS做。诀窍是使用浮动（左边的div）和非浮动的div（正确的）。另外，左（浮动）DIV，需要有一个最小高度，否则，右（非浮动）的div将采取左列的空间，如果左侧没有任何内容。

编辑：右<div>也应该有以下规则：

overflow: hidden; 
display: block;

的overflow: hidden使得DIV表现为一列的权利，否则其内容将围绕流动左股利。

请注意，#wrapper不需要宽度，因为<div>的默认宽度为100％（因为您声称它将占用浏览器窗口的整个宽度），并且还会删除其边距。

下面是一个示例（为了非HTML5浏览器，我将<section>更改为<div>，但它的工作原理相同）。

我放置背景颜色来区分的所有元素。

http://jsfiddle.net/pmv3s/1/

这里是全屏幕版本：http://fiddle.jshell.net/pmv3s/1/show/light/

的CSS：

#wrapper { 
    padding: 40px 0; 
    overflow: hidden; 
    background-color: red; 
    min-height: 5px; 
} 
#list { 
    float: left; 
    width: 200px; 
    background-color: green; 
    overflow: hidden; 
    min-height: 100px; 
} 
#grid { 
    display: block; 
    float: none; 
    background-color: blue; 
    min-height: 100px; 
    overflow: hidden;  
}

来源

2012-08-01 19:04:49 jackJoe

这只是创建了一套高度浮动框。如果其他列的（右一个的）身高增长比左列更大，内容将漂浮那个盒子和框将显示这一点。左上方有一个小方框。 – Tom 2012-08-01 19:25:31

@Tom是真的，但OP没有要求相同高度的内部divs，是吗？他说''包装div将采取那些2个div高度的最大* – jackJoe 2012-08-01 19:27:50

“左右浮动”，就像在左边框和右边下面一样，这不是OP要求的 – Tom 2012-08-01 19:30:32

这里是你使用jQuery的一点点，因为我不认为有一个纯CSS解决您的问题（但我可能是错的）的解决方案。

http://fiddle.jshell.net/L32uj/

来源

2012-08-01 18:06:31

两栏，左侧固定宽度，右动态宽度

回答

相关问题