考慮浮動元素的填充

我想有一個主要元素，其側塊漂浮在其右側。我不知道側塊的數量，也不知道它們的最終總高度。但我的主元素應該有相同的高度（請參閱下面的示例以更好地理解），而不使用列。考慮浮動元素的填充

（虛線區域是真正的內容）

enter image description here

要強制我的主要（紅色）元素，以適應側花紋塊的高度，我用這一招：

padding-bottom: 5000px; 
margin-bottom: -5000px;

這種運作良好，但側塊不關心填充，他們只是忽略它。
我怎樣才能讓他們考慮填充？

注：HTML標記不應該改變，我不捨得用JS佈局目的

.container { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 

 
.main { 
 
    float: left; 
 
    background: tomato; 
 
    width: 440px; 
 
    padding-bottom: 5000px; 
 
    margin-bottom: -5000px; 
 
} 
 
.side { 
 
    float: left; 
 
    background: forestgreen; 
 
    height: 50px; 
 
    width: 150px; 
 
    margin-left: 10px; 
 
    margin-bottom: 10px; 
 
}

<div class="container"> 
 
    
 
    <div class="main">&nbsp;</div> 
 
    
 
    <div class="side">&nbsp;</div> 
 
    <div class="side">&nbsp;</div> 
 
    <div class="side">&nbsp;</div> 
 
    
 
</div>

來源

2014-10-30 zessx

這是怎麼一個選項？

沒有標記變化和純粹的CSS沒有絕對值的變化已經給出。

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
.main { 
 
    background: tomato; 
 
    width: 440px; 
 
    padding-bottom: 5000px; 
 
    margin-bottom: -5000px; 
 
    float: left; 
 
} 
 
.side { 
 
    background: forestgreen; 
 
    height: 50px; 
 
    width: 150px; 
 
    margin-left: 10px; 
 
    margin-bottom: 10px; 
 
    float: right; 
 
    clear: right; 
 
} 
 

 
.side:last-child { 
 
    margin-bottom: 0; 
 
}

<div class="container"> 
 
    <div class="main">&nbsp;</div> 
 
    <div class="side">&nbsp;</div> 
 
    <div class="side">&nbsp;</div> 
 
    <div class="side">&nbsp;</div> 
 
</div>

來源

2014-10-30 10:11:29

由於您的解決方案不需要設置額外的魔術數字，我會盡力而爲。謝謝！ – zessx 2014-10-31 08:28:17

的唯一途徑，我可以想出一個解決方案是這樣的：

JS FIDDLE

我圍繞3個（森林）綠色方塊製作了一個.wrapper div，並將其中一個置於右側。所以，現在你有這3個盒子正好浮在西紅柿色的div上。

不要忘記在浮動div下都清楚，否則一切都會重疊div。並在你的CSS表：.clear {clear：both; }

希望它有幫助。 :)

來源

2014-10-30 08:37:07 Refilon

這是我會選擇的方式，但對於建築用我不能創建這個包裝，因爲在我的問題提及。無論如何感謝您的回答，+1。 – zessx 2014-10-31 08:24:40

-1

當你浮動一個元素時，它實際上將它從文檔流中取出，所以填充對它沒有影響。你可以使用margin-top：10px;在你的內部divs上。

來源

2014-10-30 08:40:14

您可以開發您的解決方案嗎？ 'margin-top'如何幫助我在這裏？ – zessx 2014-10-30 08:56:43

我找到了一個解決方案，使用的margin-left代替float: left：

.container { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 

 
.main { 
 
    float: left; 
 
    background: tomato; 
 
    width: 440px; 
 
    padding-bottom: 5000px; 
 
    margin-bottom: -5000px; 
 
} 
 
.side { 
 
    background: forestgreen; 
 
    height: 50px; 
 
    width: 150px; 
 
    margin-left: 450px; 
 
    margin-bottom: 10px; 
 
}

<div class="container"> 
 
    
 
    <div class="main">&nbsp;</div> 
 
    
 
    <div class="side">&nbsp;</div> 
 
    <div class="side">&nbsp;</div> 
 
    <div class="side">&nbsp;</div> 
 
    
 
</div>

來源

2014-10-30 09:54:55 zessx

考慮浮動元素的填充

回答

相關問題