1

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

2 回答 2

0

简短的回答是你可以这样做，但我认为它不会像你期望的那样表现。

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

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

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

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

有很多方法可以伪造它（请参阅仿列技术），但您不能以编程方式让一个 div 更改它的高度以匹配另一个。

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

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

于 2012-02-23T14:09:47.523 回答
0

您需要做几件事：

你需要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;
}

如果您遇到困难，请参阅此页面。

于 2012-02-23T14:15:34.857 回答