我在一个 div 元素中有两个 div 元素。这两个 div 元素都是 50% 宽，一个向左浮动，另一个向右浮动。右侧 float 的 div 包含一张高图片(不同高度)，左侧 float 的 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>
最佳答案
简短的回答是你可以有点这样做，但我不认为它会按照你期望的方式运行。
您必须为这两个 <div> 声明明确的高度的 -
.left, .right {
height: 100px /*or whatever height you want*/;
}
如果这是一个静态页面，图像永远不会改变，您可以手动输入像素数量。
如果图片要改变，而您不知道高度是多少，您无法使用纯 CSS 使左侧 div 与右侧 div 的高度相匹配。
有很多方法可以伪造它(请参阅 faux columns technique )，但您无法以编程方式让一个 div 更改其高度以匹配另一个。
有很多方法可以用 JavaScript 做到这一点，但我不打算深入探讨它们，因为你问的是 CSS(而且我讨厌使用 JS 来操纵那样的布局 - 它非常不可靠)。
此外:如果您包含的 div、.container 崩溃了，那是因为您需要 float 它或应用 clearfix technique。 .
关于css - float div 内的三个不同大小的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9414413/