如何在HTML / CSS中创建稳定的两列布局 [英] How to make a stable two column layout in HTML/CSS
问题描述
我想要一个有两列的容器。详情：
I want a container with two columns. Details:
- 宽度应调整为其父项的100％
- 高度必须调整为包含两列（即其高度应该完全等于两列的较大高度，因此没有溢出，滚动条从不显示）
- 最小尺寸应为左栏宽度的两倍。
- 应为可变高度，可调整为其内容的高度。
-
- 如果即使只有一个像素的边框，内边距或边框，应该不会破坏布局或互相叠加。保证金适用于任一个，因为这将非常不稳定和不幸。
- 必须有以像素为单位的固定绝对宽度。
- 宽度必须填满容器中的剩余空间。换句话说...
- 宽度必须等于容器宽度减去左列的宽度，这样，如果我在此列中放置一个DIV块元素，将其宽度设置为100％ ，给它一个像10px的高度，并给它一个背景颜色，我会看到一个10px高彩色条，从左边的右边缘到容器的右边缘（即它填充右列的宽度）。
容器应该能够调整大小通过调整浏览器窗口大小）到其最小宽度（较早指定）或更大的宽度，而不破坏布局。 断开将包括左列更改大小（记住它应该有固定的像素宽度），右列包裹在左边一个，滚动条出现，右边的列元素不能占用整个列宽
The container should be able to resize (by resizing the browser window) down to its minimum width (specified earlier) or to a much larger width without breaking the layout. "Breaking" would include the left column changing size at all (remember it's supposed to have a fixed pixel width), the right column wrapping under the left one, scrollbars appearing, block elements in the right column failing to take up the entire column width, and in general any of the aforementioned specifications failing to remain true.
如果使用浮动元素，应该没有机会正确的列将包装在左边的列下，容器将不能包含两个列（通过裁剪列的任何部分或允许列的任何部分溢出其边界），或滚动条会出现（所以我会厌倦建议使用overflow：overflow以外的任何东西来触发浮动元素遏制）。对列应用边框不应该破坏布局。列的内容，特别是右列的内容不应该破坏布局。
If floating elements are used, there should be no chance that the right column will wrap under the left one, that the container will fail to contain both columns (by clipping any part of the column or allowing any part of the columns to overflow its boundary), or that scrollbars will appear (so I'd be weary of suggesting the use of anything other than overflow:hidden to trigger floating-element containment). Applying borders to the columns should not break the layout. The content of the columns, especially of the right column, should not break the layout.
似乎有一个简单的基于表的解决方案，但在任何情况下它惨败。例如，在Safari中，如果容器变得太小，我的固定宽度的左栏将缩小，而不是保持我指定的宽度。也似乎是这样的情况，当应用于TD元素时，CSS宽度指的是最小宽度，使得如果更大的东西放置在其内部，则它将膨胀。我试过使用table-layout：fixed;没有帮助。我也看到了表示右列的TD元素不会扩展以填充剩余区域的情况，或者它将出现（例如，第三列1px宽将被一直推到右侧），但是在右列周围放置一个边框将显示它只有其内联内容一样宽，并且其宽度设置为100％的块级元素不填充列的宽度，而是匹配内联内容的宽度（即，TD的宽度似乎完全取决于内容）。
There seems to be a simple table-based solution to this, but under every circumstance it fails miserably. For example, in Safari, my fixed-width left column will shrink if the container gets too small, rather than maintaining the width I specified. It also seems to be the case that CSS width, when applied to a TD element refers to a minimum width, such that if something larger is placed inside it, it will expand. I've tried using table-layout:fixed; doesn't help. I've also seen the case where the TD element representing the right column will not expand to fill the remaining area, or it will appear to (for example a third column 1px wide will be pushed all the way to the right side), but putting a border around the right column will show that it's only as wide as its inline content, and block-level elements with their width set to 100% do not fill the width of the column, but rather match the width of the inline-content (i.e. the width of the TD seems to be completely dependent on the content).
我看到的一个潜在的解决方案太复杂;我不在乎IE6，只要它在IE8，Firefox 4和Safari 5中工作。
One potential solution I have seen is too complex; I couldn't care less about IE6, as long as it works in IE8, Firefox 4, and Safari 5.
推荐答案
你去：
<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>
请参阅此处： http://jsfiddle.net/FVLMX/
这篇关于如何在HTML / CSS中创建稳定的两列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
