使用浮點數的HTML佈局

我試圖用float: left和DOM的最小數量創建以下佈局。使用浮點數的HTML佈局

使用下面的代碼，它不工作（明顯），我得到這樣的結果：

代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
    html, body { 
     width: 100%; 
     height: 100%; 
     padding: 0; 
     margin: 0; 
    } 
    .out { 
     width: 100%; 
     height: 100%; 
     box-sizing: border-box; 
    } 
    .in { 
     float: left; 
     box-sizing: border-box; 
    } 
    </style> 
</head> 
<body> 

    <div class="out"> 
     <div class="in" style="width: 50%; height: 50%; background: red;"></div> 
     <div class="in" style="width: 50%; height: 100%; background: green;"></div> 
     <div class="in" style="width: 50%; height: 50%; background: blue;"></div> 
    </div> 

</body> 
</html>

所以是有如何做到這一點？

重要注意事項！

我必須使用float: left因爲從其他的佈局
約束的我不能使用flex

來源

2015-11-03 Yoni Levy

您需要周圍的兩個較小的，使它們一起包含在一個容器中。這裏是一個小提琴：http://jsfiddle.net/ce0nmase/

正如你可以在html看到的，我有這樣的代碼：

<div class="in" style="width: 50%; height: 100%; background: red;"> 
    <div class="in" style="width: 100%; height: 50%; background: blue;"></div> 
    <div class="in" style="width: 100%; height: 50%; background: yellow;"></div> 
</div>

這意味着你有兩個50％的集裝箱，其中一個是全高度。然後在你的第二個，你有兩個有50％的高度的集裝箱。

編輯：

或者，您可以添加float:right;到全高箱。

http://jsfiddle.net/ce0nmase/1/

來源

2015-11-03 10:35:59

這種方法很好，我意識到這一點，但我想，以避免不必要的容器，如果我可以（我不是在尋找一個平凡解） –

浮法全高一個正確：http://jsfiddle.net/ce0nmase/1/ –

使用浮點數的HTML佈局

回答

相關問題