Question

我在一个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>

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

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

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

2 个答案: