浮動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內的三個不同大小的行

回答

相關問題