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

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

<!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>

来源

2012-02-23 nqw1

我真的对你的问题感兴趣，这里有一个jsFiddle（http://jsfiddle.net/9DyDW/5/）与你的代码，我正在玩它，但我无法弄清楚发生了什么事情。问题实际上是高度：.left类中的100％规则，如果您将其更改为自己排列的像素。但为什么100％不能奏效我的问题 – 2012-02-23 14:08:41

问题是，如果包含块的高度为％，则不能指定高度，请参见[W3规范]（http：// www .w3.org/TR/CSS2/visudet.html＃the-height-property）（特别是“”位）。如果你设置了'.container {height：400px; }在你的原始代码中：这使得紫色的盒子得到正确的高度。 – Jeroen 2012-02-23 15:02:28

我害怕我无法用百分比完成这个任务。我想我必须使用JS来捕捉图像的高度并为.left容器赋予相同的高度。谢谢你的帮助！ – nqw1 2012-02-24 07:20:08

简短的回答是，你可以种做到这一点，但我不认为它会表现你期望的方式。

你将不得不为两个<div>的声明明确指定的高度 -

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

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

如果图片是不会改变的，你不知道什么高度将是，你不能让左格匹配使用纯CSS右div的高度。

有办法伪造它（见faux columns technique），但你不能以编程方式获得一个div来改变它的高度，以匹配另一个。

有办法用JavaScript来做到这一点，但我不打算进入它们，因为你问起CSS（我讨厌使用JS操控布局这样的 - 这是非常不可靠的）。

另外：如果包含div，.container，折叠，这是因为您需要浮动它或应用clearfix technique。

来源

2012-02-23 14:09:47 chipcullen

谢谢你的帮助！右边的图像将会改变并且具有不同的高度，所以我想我将不得不使用JS来捕捉.right元素的高度，并给与.left元素相同的高度。 – nqw1 2012-02-24 07:21:58

我不确定你要做什么样的设计，但是可能值得考虑修改设计，因此不同高度并不重要。例如，您可以拥有一个具有单一背景色的父元素，我们使用人造列技术来插入边框。但是，如果你的设计不能以这些方式完成，是的，JS就是要走的路。 – chipcullen 2012-02-24 14:35:14

有你需要做的几件事情：

您需要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如果你有困难。

来源

2012-02-23 14:15:34

谢谢你的帮助！我已经尝试过，但它不能帮助我。它只会使.left和.right div的高度相同，但.left div内的段落元素仍然不会填满整个.left div的高度。 – nqw1 2012-02-24 07:25:22

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

回答

相关问题