Divs：等距水平間距

Question

我創建的網站在主頁上有一系列四個圖像，用作導航，下方有一個大圖像。

<div style="width: 696px"> 
<div class="imglink"></div> 
<div class="imglink"></div> 
<div class="imglink"></div> 
<div class="imglink"></div> 
</div> 

<div style="width:696px"> 
... 
</div> 

「imglink」divs是160px寬。

我想在頂部的div圖像到div內部水平隔開均勻，用與下面的圖像的邊緣齊平的兩個外側的div。我一直在嘗試花車，邊距，填充等幾個小時，現在無法弄清楚。

感謝您的幫助！

Answer 1

我會讓第一個和最後一個div截然不同。

<div class="imglink_first"></div> 
<div class="imglink"></div> 
<div class="imglink"></div> 
<div class="imglink_last"></div> 

然後您的css可以將保證金僅應用於imglink。

您的總填充將是696px - 4*160px = 696px - 640px = 56px。有三個填充區域，因此每個填充區域應該是56px/3 = 18.67px。不幸的是，這不是一個整數，所以你需要四捨五入。 18px * 3 = 54px在div的末尾留下兩個額外的像素。此外，您需要每個左側和右側18px/2 = 9px。

.imglink_first, .imglink, .imglink_last{ 
    float: left; 
} 

.imglink{ 
    margin: 0px 9px; 
} 

或者，你可以使用CSS選擇器與:first-child和:last-child

<div class="image-row" style="width: 696px"> 
    <div class="imglink"></div> 
    <div class="imglink"></div> 
    <div class="imglink"></div> 
    <div class="imglink"></div> 
</div> 

.imglink{ 
    float: left; 
    margin: 0px 9px; 
} 

.image-row:first-child, .image-row:last-child{ 
    margin: 0px; 
} 

雖然這不是在所有的瀏覽器都支持。

Answer 2

這裏是你的起點。 http://jsfiddle.net/gqf5h/1/

Answer 3

如果你知道的菜單項的數量，包裹每一個在一個div。然後將菜單div寬度設置爲寬度的百分比並設置文本對齊中心。即

4個菜單選項：

CSS

#menu div{ 
    width:25%; 
    text-align:center; 
    display:inline-block; 
} 

HTML

<div id='menu'> 
    <div><a href='#'>link</a></div> 
    <div><a href='#'>link</a></div> 
    <div><a href='#'>link</a></div> 
    <div><a href='#'>link</a></div> 
</div>