Question

相关（可能重复）的问题：

How do I achieve equal height divs with HTML / CSS ?

Make Two Floated CSS Elements the Same Height

大家好，

我试了几个小时来创建一个可伸缩的2列div但没有任何运气。这是我的HTML代码和我下面的css代码

<div class="two_cols_container">
  <div class="two_cols">
    <div class="left-col">
      test
    </div>
    <div class="right-col">
      test
    </div>
  </div>
</div>

我的css代码是

.two_cols_container {
  width: 100%;
  height: 100%;
} 
.two_cols {
  position: relative;
  margin: 0 auto;
  border: 1px solid black;
  height: 100%;
  height: auto !important;
  min-height: 100%; 
}
.two_cols .left-col {
  /*position: absolute;
    left: 0;*/
  float: left;
}
.two_cols .right-col {
  /*position: absolute;
    right: 0;*/
  float: right;
}

任何想法？

Answer 1

有

表（你可能不想依赖它）
Faux Columns（最实用的方法，使用图像伪装列 - 请参阅http://www.alistapart.com/articles/fauxcolumns/）
边境技巧（有点复杂，但这只适用于纯色）
填充/边距/剪辑（我不推荐的另一个复杂的）

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

div＃wrapper {background：url（/images/faux.gif）repeat-y; }

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

顺便说一句，因为你有浮点数，请将overflow：hidden应用于.two_cols选择器并添加此规则：

html，body {身高：100％; }

Answer 2

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

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

编辑：我同意Sneakiness，将宽度降低到低于50％，因为边距和填充也必须适合。

Answer 3

我发现this method是所有等高两列布局中最简单，最有效的。你不需要伪造任何东西，它只是工作。

Answer 4

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

Answer 5

您可以使用div style属性创建所需的列数，以及您需要的CSS效果：

<div style=”width: 100%;”>

<div id=”left” style=”float: left;">

<--! your text here -->

</div>

<div id=”right” style=”float: right;">

<--! your text here -->

</div>

</div>

来源和示例：WordPress Tutorial Series - Basics about HTML and CSS

2列CSS div，可伸缩高度

5 个答案: