浮动 div 内的三个不同大小的行答案

【问题标题】：Three different sized rows inside a floated div浮动 div 内的三个不同大小的行
【发布时间】：2012-02-23 13:54:38
【问题描述】：

我在一个 div 元素中有两个 div 元素。这两个 div 元素都是 50% 宽，另一个浮动到左边，另一个浮动到右边。右侧浮动 div 包含一张高图片（不同高度），左侧浮动 div 包含文本。在左边的 div 中，这些文本被分成三个不同大小的行，整个左边的 div 应该和右边的 div 一样高。我怎么能只使用 CSS 来做到这一点？这是我的示例代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
    margin: 0;
}
.container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FF0;
}
.left {
    float: left;
    width: 50%;
    background: #F0F;
}
.left .first {
    height: 20%;
}
.left .second {
    height: 50%;
}
.left .third {
    height: 30%;
}
.right {
    float: right;
    width: 50%;
}
.right img {
    display: block;
    max-width: 100%;
}
p {
    margin: 0;
}
</style>
</head>
<body>          
    <div class="container">
        <div class="left">
            <div class="first">
                <p>First</p>
            </div>
            <div class="second">
                <p>Second</p>
            </div>
            <div class="third">
                <p>Third</p>
            </div>
        </div>
        <div class="right">
            <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
        </div>
    </div>
</body>
</html>

【问题讨论】：

我真的对你的问题很感兴趣，这是一个带有你的代码的 jsFiddle (jsfiddle.net/9DyDW/5)，我正在玩它，但我不知道发生了什么。问题实际上是 .left 类中的 height:100% 规则，如果将其更改为像素，它会自行解决。但是为什么 100% 不起作用让我感到震惊
问题是如果包含块也有一个以 % 为单位的高度，则您不能以 % 为单位指定高度，请参阅the W3 spec on this（特别是“”位）。如果您在原始代码中设置.container { height: 400px; }，您可以看到这一点：这会使紫色框获得正确的高度。
我担心我不能只用百分比来完成这个。我想我必须使用 JS 来捕捉图像的高度并为 .left 容器提供相同的高度。感谢您的帮助！

标签： css html css-float row-height

【解决方案1】：

简短的回答是您可以有点这样做，但我认为它不会像您期望的那样运行。

您必须为两个 <div> 声明明确的高度 -

.left, .right {
   height: 100px /*or whatever height you want*/;     
}

如果这是一个静态页面，并且图像永远不会改变，您可以手动输入像素数量。

如果图片要改变，而您不知道高度将是多少，您无法使用纯 CSS 使左侧 div 与右侧 div 的高度相匹配。

有很多方法可以伪造它（请参阅faux columns technique），但您不能以编程方式让一个 div 更改其高度以匹配另一个。

使用 JavaScript 有很多方法可以做到这一点，但我不打算深入探讨，因为您询问了 CSS（而且我讨厌使用 JS 来操纵这样的布局 - 它非常不可靠）。

另外：如果您的包含 div .container 崩溃了，那是因为您需要浮动它，或者应用 clearfix technique。

【讨论】：

感谢您的帮助！右边的图像会改变并且有不同的高度，所以我想我必须使用 JS 来捕捉 .right 元素的高度并给 .left 元素提供相同的高度。
我不确定您要追求什么设计，但可能值得考虑修改设计，因此不同的高度无关紧要。例如，您可以有一个具有单一背景颜色的父元素，我们使用假列技术来插入边框。但是，如果您的设计不能以这些方式完成，是的，JS 是要走的路。

【解决方案2】：

你需要做一些事情：

您需要float 容器。

您需要添加一个额外的容器并按以下顺序嵌套 div：

<div class="container2">
  <div class="container">
    <div class="left">
      <div class="first">
        <p>First</p>
      </div>
      <div class="second">
        <p>Second</p>
      </div>
      <div class="third">
        <p>Third</p>
      </div>
    </div>
    <div class="right">
      <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
    </div>
  </div>
</div>

然后您需要relative 定位您的容器并将它们向右移动。之后，您将从左侧移动内容 div。

对于您的 CSS：

.container {
  width: 100%;
  float: left;
  position: relative;
  right: 50%;
}
.container2 {
  width: 100%;
  float: left;
  overflow:hidden;
  position:relative;
}
.left {
  float: left;
  width: 50%;
  left: 50%;
  position: relative;
  background: #F0F;
}
.right {
  float: left;
  width: 50%;
  left: 50%;
  position: relative;
}

如果您遇到困难，请联系this page。

【讨论】：

感谢您的帮助！我已经尝试过了，但这对我没有帮助。它只会使 .left 和 .right div 的高度相同，但 .left div 中的那些段落元素仍然没有用给定的高度填充整个 .left div。