浮動或嵌入塊元素上的自動邊距

我正在試圖很好地製作div空間中的所有子元素。我已經使用內聯塊元素和浮動元素設置了CSS。子元素是固定的大小。浮動或嵌入塊元素上的自動邊距

HTML

<div class="content"> 
    <h2>Inline-block</h2> 
    <a href="#" class="i-b-item">I-B Item 1</a> 
    <a href="#" class="i-b-item">I-B Item 2</a> 
    <a href="#" class="i-b-item">I-B Item 3</a> 
    <a href="#" class="i-b-item">I-B Item 4</a> 
    <a href="#" class="i-b-item">I-B Item 5</a> 
    <a href="#" class="i-b-item">I-B Item 6</a> 
    <a href="#" class="i-b-item">I-B Item 7</a> 
    <a href="#" class="i-b-item">I-B Item 8</a> 
    <h2>Floated</h2> 
    <a href="#" class="f-item">Float Item 1</a> 
    <a href="#" class="f-item">Float Item 2</a> 
    <a href="#" class="f-item">Float Item 3</a> 
    <a href="#" class="f-item">Float Item 4</a> 
    <a href="#" class="f-item">Float Item 5</a> 
    <a href="#" class="f-item">Float Item 6</a> 
    <a href="#" class="f-item">Float Item 7</a> 
    <a href="#" class="f-item">Float Item 8</a> 
    <div style="clear:both"></div> 
</div>

CSS

.content { 
    background: grey; 
} 

.content a{ 
    padding: .5em; 
    margin: .5em; 
    height: 75px; 
    width: 150px; 
    background: white; 
} 

.i-b-item{ 
    display: inline-block; 
} 

.f-item{ 
    float: left; 
    display: block; 
}

基本上，當窗口大小的變化，我想子元素的利潤，使他們填補剩餘空間。因此，我不希望將右側的剩餘空間放大，而是將子元素的邊距展開，以便將所有子元素均勻地分隔開，同時仍然左對齊。

我不想用Javascript做任何計算，我希望獲得純CSS解決方案，但似乎無法讓任何工作正確。

來源

2012-10-28 tedski

百分比問題是，邊距仍然是固定的，並且不隨窗口大小而動態變化。 – tedski

您的解決方案是否填充剩餘空間，因爲剩餘空間足夠寬以滿足'.content a'的邊距和填充。否則，你必須像@tedski提到的百分比提到 – Andy

http://stackoverflow.com/questions/10548417/how-to-distribute-floated-elements-evenly-with-a-dynamic-column-and-row- count-in/10550660＃10550660 – thirtydot

將text-align:justify用於子元素設置爲display:inline-block的父元素。

在你的情況下，.content類可以擁有它。並且您的空間將平均分配，而元素可以保持固定的大小（寬度）。

.content { 
    text-align:justify; 
}

希望這會有所幫助。

來源

2013-09-20 23:15:37

浮動或嵌入塊元素上的自動邊距

回答

相關問題