2列CSSdiv，可伸缩高度-2columnCSSdivwithstretchableheight

A: either use float OR absolute positioning to make your columns. not both. You can just float both the columns to the left and it should be ok with no absolute positioning.

答:要么使用浮点数或绝对定位来制作列。不是都。您可以将两个列向左浮动,它应该没有绝对定位。

B: you're big problem is the columns can't be next to each other if both of their' widths are 100%. There's no way they can sit side by side in their containing element when they both take up the whole width. Set the width to at most 50%, but I'd go with a little lower to account for some browser bugs.

B:你最大的问题是,如果它们的宽度都是100%,则列不能彼此相邻。当它们占据整个宽度时,它们无法并排放置在它们的包含元素中。将宽度设置为最多50%,但我会稍微降低以解决一些浏览器错误。

EDIT: I agree with Sneakiness, wet the width to something lower than 50%, because the margins and padding have to fit too.

编辑:我同意Sneakiness,将宽度湿润到低于50%,因为边距和填充也必须适合。

There's

1. Tables ( you probably wouldn't want to rely on this )

表(你可能不想依赖于此)

2. Faux Columns ( the most practical way, faking columns going down using images - see http://www.alistapart.com/articles/fauxcolumns/ )

Faux Columns(最实用的方法,使用图像伪造柱子 - 请参阅http://www.alistapart.com/articles/fauxcolumns/)

3. Border Trick ( a little complex but this only works for solid colors )

边境技巧(有点复杂,但这只适用于纯色)

4. Padding / Margin / Clipping ( another complex one I wouldn't recommend )

填充/边距/剪辑(另一个复杂的我不推荐)

I'd go with #2. If you need colors that are backgrounds of those columns to go all the way down, set a background on the container of those columns and make sure it repeats vertically, e.g,

我会选择#2。如果您需要这些列的背景颜色一直向下,请在这些列的容器上设置背景并确保它垂直重复,例如,

div#wrapper { background:url(/images/faux.gif) repeat-y; }

div#wrapper {background:url(/images/faux.gif)repeat-y; }

If the columns are floated make sure to have overflow:hidden and a hasLayout trigger for IE like a width.

如果列是浮动的,请确保具有overflow:hidden和IE的hasLayout触发器,如宽度。

By the way since you have floats, apply overflow:hidden to .two_cols selector and add this rule:

顺便说一句,因为你有浮动,应用overflow:hidden到.two_cols选择器并添加这个规则:

html, body { height:100%; }

html,body {身高:100%; }

I found this method to be the simplest and most effective of all equal-height two-column layouts. You don't have to fake anything, and it Just Works.

我发现这种方法是所有等高两列布局中最简单和最有效的方法。你不必伪造任何东西,它只是工作。

If you mean that you want a fluid two-column layout, you need to set margins for both columns separately to position them both on the page.

如果您想要一个流畅的双列布局,则需要分别为两个列设置边距,以便将它们放在页面上。

You can use div style property to create as many columns you need, with what ever CSS effect you need :

您可以使用div样式属性创建所需的列数,以及您需要的CSS效果:

<--! your text here -->





<--! your text here -->

Source and example : WordPress Tutorial Series - Basics about HTML and CSS

来源和示例:WordPress教程系列 - 关于HTML和CSS的基础知识