Tag: 两列布局

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

我想要一个两列的容器。 细节： 容器 宽度应该调整到其父元素的100％（很容易完成）。 高度必须调整以包含两列（即其高度应该完全等于两列的较大高度，所以没有溢出，滚动条从不显示） 应该有一个最小的大小等于左列的宽度的两倍。 一般的列 应该是不同的高度，适应其内容的高度。 应该是并排的，这样它们的顶部边缘是一致的。 如果边界，填充或边界的任何一个像素都应用于任何一个像素，则不应该破坏布局或将其相互包裹，否则将会非常不稳定并且不幸。 左栏专门 必须以像素为单位具有固定的绝对宽度。 具体的右栏 宽度必须填充容器中的剩余空间。 换一种说法… 宽度必须等于容器宽度减去左列的宽度，这样，如果我在此列中放置一个DIV块元素，请将其宽度设置为100％，给它一个像10px之类的高度，并给它一个背景颜色，我会看到从左列的右边缘到容器的右边缘的10px高的彩色条（即填充右列的宽度）。 要求的稳定性 容器应该能够调整（通过调整浏览器窗口的大小）到其最小宽度（前面指定），或者调整到更大的宽度，而不会破坏布局。 “打破”将包括左列改变的大小（记住它应该有一个固定的像素宽度），右列包装在左边，出现滚动条，右列中的块元素没有占用整个列宽，并且一般来说任何上述规格都不能保持真实。 背景 如果使用浮动元素，那么右边的列将不会包含在左边的列中，容器将不能包含这两列（通过裁剪列的任何部分或允许列的任何部分溢出其边界），或者滚动条会出现（所以我会厌倦了build议使用除溢出以外的任何东西：隐藏触发浮动元素的遏制）。 对列应用边框不应该破坏布局。 列的内容，尤其是右列的内容不应该破坏布局。 似乎有一个简单的基于表格的解决scheme，但在任何情况下，它都惨败。 例如，在Safari中，如果容器太小，我的固定宽度的左列将缩小，而不是保持我指定的宽度。 CSS宽度当应用于TD元素时，也指的是最小宽度，这样，如果放置更大的东西，它将会扩大。 我试过使用table-layout：fixed; 没有帮助。 我也看到了代表右列的TD元素不会扩大以填充剩余区域的情况，或者它会出现（例如，第三列1px宽将一直推到右边），但是在右栏放置一个边框将显示它只与内联内容一样宽，宽度设置为100％的块级元素不会填充列的宽度，而是匹配内联内容的宽度（即TD的宽度似乎完全依赖于内容）。 我所看到的一个可能的解决办法太复杂了， 只要IE8，Firefox4和Safari5能够工作，我就不会在意IE6。