如何在HTML / CSS中制作一个稳定的两列布局

我想要一个两列的容器。细节：

容器

宽度应该调整到其父元素的100％（很容易完成）。
高度必须调整以包含两列（即其高度应该完全等于两列的较大高度，所以没有溢出，滚动条从不显示）
应该有一个最小的大小等于左列的宽度的两倍。

一般的列

应该是不同的高度，适应其内容的高度。
应该是并排的，这样它们的顶部边缘是一致的。
如果边界，填充或边界的任何一个像素都应用于任何一个像素，则不应该破坏布局或将其相互包裹，否则将会非常不稳定并且不幸。

左栏专门

必须以像素为单位具有固定的绝对宽度。

具体的右栏

宽度必须填充容器中的剩余空间。换一种说法…
宽度必须等于容器宽度减去左列的宽度，这样，如果我在此列中放置一个DIV块元素，请将其宽度设置为100％，给它一个像10px之类的高度，并给它一个背景颜色，我会看到从左列的右边缘到容器的右边缘的10px高的彩色条（即填充右列的宽度）。

要求的稳定性

容器应该能够调整（通过调整浏览器窗口的大小）到其最小宽度（前面指定），或者调整到更大的宽度，而不会破坏布局。 “打破”将包括左列改变的大小（记住它应该有一个固定的像素宽度），右列包装在左边，出现滚动条，右列中的块元素没有占用整个列宽，并且一般来说任何上述规格都不能保持真实。

背景

如果使用浮动元素，那么右边的列将不会包含在左边的列中，容器将不能包含这两列（通过裁剪列的任何部分或允许列的任何部分溢出其边界），或者滚动条会出现（所以我会厌倦了build议使用除溢出以外的任何东西：隐藏触发浮动元素的遏制）。对列应用边框不应该破坏布局。列的内容，尤其是右列的内容不应该破坏布局。

似乎有一个简单的基于表格的解决scheme，但在任何情况下，它都惨败。例如，在Safari中，如果容器太小，我的固定宽度的左列将缩小，而不是保持我指定的宽度。 CSS宽度当应用于TD元素时，也指的是最小宽度，这样，如果放置更大的东西，它将会扩大。我试过使用table-layout：fixed; 没有帮助。我也看到了代表右列的TD元素不会扩大以填充剩余区域的情况，或者它会出现（例如，第三列1px宽将一直推到右边），但是在右栏放置一个边框将显示它只与内联内容一样宽，宽度设置为100％的块级元素不会填充列的宽度，而是匹配内联内容的宽度（即TD的宽度似乎完全依赖于内容）。

我所看到的一个可能的解决办法太复杂了，只要IE8，Firefox4和Safari5能够工作，我就不会在意IE6。

干得好：

<html> <head> <title>Cols</title> <style> #left { width: 200px; float: left; } #right { margin-left: 200px; /* Change this to whatever the width of your left column is*/ } .clear { clear: both; } </style> </head> <body> <div id="container"> <div id="left"> Hello </div> <div id="right"> <div style="background-color: red; height: 10px;">Hello</div> </div> <div class="clear"></div> </div> </body> </html>

我只关心IE6，Firefox4和Safari5

这让我开心。

试试这个： 现场演示

display: table是惊人的好。一旦你不关心IE7，你可以自由使用它。它实际上并没有任何通常的缺点<table> 。

CSS：

 #container { background: #ccc; display: table } #left, #right { display: table-cell } #left { width: 150px; background: #f0f; border: 5px dotted blue; } #right { background: #aaa; border: 3px solid #000 }

小菜一碟。

使用960Grids转到自动布局生成器并制作两列stream体devise。 build立一个左列的网格工作的宽度….这是使用网格的唯一的挑战，这是很容易的，一旦你阅读教程。简而言之，网格中的每一列都有一定的宽度，并且您可以设置要使用的列的数量。要得到一个确切的宽度的列，你必须调整你的math，以便你的列宽是确切的。不太强悍。

没有机会打包，因为其他人已经为你而战。只要你可能需要去兼容性。快速简单….现在，下载，定制和部署。

瞧。网格FTW。