2014-01-24 49 views
2
最大的高度

我的問題是基於 css: set the height of floating divs as maximum of their heights - Is it possible to fix this jsFiddle with pure css so that all 3 divs that are in the same row have the same height, the maximum of their 3 heitghts?CSS:設定浮動的div的高度與利潤率

的解決方案是here - jsFiddle

但是,我沒有提到我需要一些元素之間的邊距(因爲不重要和容易添加)。因此,建議使用display:table-cell解決方案。不幸的是,保證金財產不適用於display:table-cell元素。

是否仍然有可能解決我的問題之間的空間之間的一些空間純css? 原始代碼在這裏,我想所有三個div的高度是相同的,他們之間有一些空間,比如說3px

的代碼是在這裏:

<style> 
#main{ 
    border:1px solid red; 
    width:605px; 
    overflow:hidden; 
} 
#zero{ 
    border:1px solid blue; 
} 
.small{ 
    border:1px solid green; 
    float:left; 
    width:199px; 
} 
</style> 
<div id="main"> 
    <div id="zero"> 
     0 
    </div> 
    <div class="small"> 
     small text 
    </div> 
    <div class="small"> 
     large text large textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge text 
    </div> 
    <div class="small"> 
     another small text 
    </div> 
</div> 

這裏是原來的問題@jsFiddle

再次,如果可能的話,我寧願選擇一個純粹的css解決方案

+0

這可能有助於:http://stackoverflow.com/questions/18346083/space-between-divs-display-table-cell –

+0

但是,如果你考慮使用JS的任何機會:http://stackoverflow.com/a/18362090/1725764 –

回答

0

您可以在#main上使用border-spacing: 3px;

JsFiddle

+0

謝謝!這是解決方案(適用於我的情況)! – Haradzieniec

0

你好我的隊友打了一下你的代碼,如果您刪除浮動離開,並添加display:table-cell;你得到你想要的結果。

至於divs之間的差距不能確定它是否可能與一個div類。

小提琴:

http://jsfiddle.net/7A95U/1/

比爾。