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

How to make a stable two column layout in HTML/CSS

提问by Triynko

I want a container with two columns. Details:

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

The container

容器

• Width should adjust to 100% of its parent element (easily accomplished).
• Height must adjust to contain both columns (i.e. its height should be exactly equal to the larger height of the two columns, so there is no overflow and scrollbars never show)
• Should have a minimum size equal to double the width of the left column.

• 宽度应调整为其父元素的 100%（很容易实现）。
• 高度必须调整以包含两列（即其高度应完全等于两列中较大的高度，因此不会出现溢出和滚动条从不显示）
• 最小尺寸应等于左列宽度的两倍。

The columns in general

一般列

• Should be of variable height, adjusting to the height of their content.
• Should be side-by-side, such that their top edges are in line.
• Should not break the layout or wrap under each other if even a single pixel of border, padding, or margin is applied to either one, because that would be extremely unstable and unfortunate.

• 应该是可变高度，调整到其内容的高度。
• 应该并排放置，使它们的顶部边缘对齐。
• 即使单个像素的边框、填充或边距应用于任一像素，也不应破坏布局或相互缠绕，因为这将非常不稳定和不幸。

The left column specifically

左栏具体

• Must have a fixed, absolute width in pixel units.

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

The right column specifically

右栏具体

• Width must fill the remaining space in the container. In other words...
• Width must equal the container width minus the width of the left column, such that if I place a DIV block element inside this column, set its width to 100%, give it a height of something like 10px, and give it a background color, I will see a 10px high colored strip that goes from the right edge of the left column to the right edge of the container (i.e. it fills the right column's width).

• 宽度必须填满容器中的剩余空间。换句话说...
• 宽度必须等于容器宽度减去左列的宽度，这样如果我在该列内放置一个 DIV 块元素，将其宽度设置为 100%，给它一个类似 10px 的高度，并给它一个背景色，我将看到一个 10px 高的彩色条带，它从左列的右边缘到容器的右边缘（即它填充了右列的宽度）。

Required stability

所需的稳定性

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.

容器应该能够在不破坏布局的情况下（通过调整浏览器窗口的大小）调整到其最小宽度（之前指定的）或更大的宽度。“中断”将包括左列更改大小（请记住它应该具有固定的像素宽度），右列环绕在左列下方，出现滚动条，右列中的块元素未能占据整个列宽，并且通常上述任何规范都不能保持真实。

Background

背景

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.

如果使用浮动元素，则右列应该不会包裹在左列之下，容器将无法包含两列（通过剪切列的任何部分或允许列的任何部分溢出其边界） )，或者滚动条会出现（所以我会厌烦建议使用除 overflow:hidden 之外的任何内容来触发浮动元素包含）。对列应用边框不应破坏布局。列的内容，尤其是右列的内容，不应破坏布局。

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).

似乎有一个简单的基于表格的解决方案，但在任何情况下它都会失败。例如，在 Safari 中，如果容器太小，我的固定宽度左列将缩小，而不是保持我指定的宽度。似乎也是这种情况，当应用于 TD 元素时，CSS 宽度是指最小宽度，这样如果在其中放置更大的东西，它就会扩展。我试过使用 table-layout:fixed; 没有帮助。我还看到过代表右列的 TD 元素不会扩展以填充剩余区域的情况，或者它会出现（例如，第三列 1px 宽将一直推到右侧），但是在右列周围放置边框将表明它仅与其内嵌内容一样宽，

One potential solutionI have seen is too complex; I couldn't care less about IE6, as long as it works in IE8, Firefox 4, and Safari 5.

我见过的一种可能的解决方案太复杂了；我对 IE6 不在乎，只要它在 IE8、Firefox 4 和 Safari 5 中工作即可。

回答by richzilla

Here you go:

干得好：

<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>

See it in action here: http://jsfiddle.net/FVLMX/

在这里查看它的实际效果：http: //jsfiddle.net/FVLMX/

回答by thirtydot

I could care less about IE6, as long as it works in IE8, Firefox 4, and Safari 5

我可以不关心 IE6，只要它在 IE8、Firefox 4 和 Safari 5 中工作

This makes me happy.

这让我很高兴。

Try this: Live Demo

试试这个：现场演示

display: tableis surprisingly good. Once you don't care about IE7, you're free to use it. It doesn't really have any of the usual downsides of <table>.

display: table出奇的好。一旦你不关心 IE7，你就可以自由使用它。它真的没有任何通常的缺点<table>。

CSS:

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
}

回答by bpeterson76

Piece of cake.

小菜一碟。

Use 960GridsGo to the automatic layout builderand make a two column, fluid design. Build a left column to the width of grids that works....this is the only challenge using grids and it's very easy once you read a tutorial. In a nutshell, each column in a grid is a certain width, and you set the amount of columns you want to use. To get a column that's exactly a certain width, you have to adjust your math so that your column width is exact. Not too tough.

使用960Grids转到自动布局构建器并进行两列流畅设计。为有效的网格宽度构建左列......这是使用网格的唯一挑战，一旦您阅读教程，这将非常容易。简而言之，网格中的每一列都有一定的宽度，您可以设置要使用的列数。要获得恰好具有特定宽度的列，您必须调整您的数学以确保您的列宽是精确的。不太硬。

No chance of wrapping because others have already fought that battle for you. Compatibility back as far as you likely will ever need to go. Quick and easy....Now, download, customize and deploy.

没有机会包装，因为其他人已经为你打过那场战斗。尽可能地恢复兼容性。快速而简单....现在，下载、自定义和部署。

Voila. Grids FTW.

瞧。网格 FTW。