0

相关（可能重复）问题：

如何使用 HTML / CSS 实现等高 div？

使两个浮动 CSS 元素具有相同的高度

大家好，

我尝试了几个小时来创建一个可拉伸的 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;
}

任何的想法？

4

5 回答 5

2

有

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

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

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

如果列是浮动的，请确保具有溢出：隐藏和 IE 的 hasLayout 触发器，例如宽度。

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

html, 身体 { 高度:100%; }

于 2009-07-26T12:59:18.253 回答
2

答：要么使用浮动或绝对定位来制作你的列。不是都。您可以将两列都浮动到左侧，没有绝对定位应该没问题。

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

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

于 2009-07-26T13:03:40.660 回答
0

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

于 2009-07-26T13:23:04.297 回答
-1

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

于 2009-07-26T13:13:21.953 回答
-1

您可以使用 div 样式属性创建所需的任意数量的列，以及您需要的任何 CSS 效果：

<div style=”width: 100%;”&gt;

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

<--! your text here -->

</div>

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

<--! your text here -->

</div>

</div>

源代码和示例：WordPress 教程系列 - HTML 和 CSS 基础知识

于 2012-01-24T20:47:34.267 回答