具有可伸缩高度的2列CSS div

相关（可能重复）问题：

大家好,

我花了几个小时试图创建一个可伸缩的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>

有什么想法吗？

有

表（您可能不希望依赖于此）

人造柱（最实用的方法是，使用图像伪造柱-请参阅）

边框技巧（有点复杂，但只适用于纯色）

填充/边距/剪裁（另一个我不推荐的复杂选项）

我赞成第二条。如果您需要这些列的背景颜色，请在这些列的容器上设置背景，并确保其垂直重复，例如

div#wrapper{background:url（/images/faux.gif）repeat-y；}

如果列是浮动的，请确保具有overflow:hidden和hasLayout触发器（如宽度）

顺便说一下，既然您有浮动，请将overflow:hidden应用于.two_cols选择器并添加以下规则：

---

html，body{height:100%；}

A：使用浮点或绝对定位来创建列。不是两者都有。您只需将两个列向左浮动，就可以了，没有绝对定位

B:你最大的问题是，如果两列的宽度都是100%，它们就不能相邻。当它们占据整个宽度时，它们不可能并排坐在它们的包含元素中。将宽度设置为最多50%，但为了解决一些浏览器错误，我会选择稍低一点的宽度

---

编辑：我同意偷偷摸摸，把宽度弄湿到50%以下，因为边距和填充也必须合适

如果您的意思是想要一个流畅的两列布局，则需要分别设置两列的边距，以便在页面上定位它们

我发现这是所有等高双栏布局中最简单、最有效的。您不必伪造任何内容，它就可以正常工作。

您可以使用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>

---

来源和示例：

数字4是最通用的方式，也是大多数人倾向于使用的方式。对于模拟等高柱，人造柱绝对是最流行的。如果在这两个div上使用边框或填充，则还必须低于50%，因为它们会使div变大。如果需要使用填充，请在该div内放置一个div，并将填充指定给最里面的div。这不是要创建合谋，而是要平均调节高度。

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