css - 具有可拉伸(stretch)高度的 2 列 CSS div

Question

Related (possibly duplicate) questions:

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

A:要么使用 float 定位，要么使用绝对定位来制作您的列。不是都。您可以将两列都 float 到左侧，没有绝对定位应该没问题。

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

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