在網格中定位元素

您需要在620px寬的DIV（.container）內部有幾個200px寬的DIV（.item）。在網格中定位元素

.container DIV應連續適合3個.item DIV。
.item DIV應該彼此完全相距10px。
.container DIV和它旁邊的.item DIV邊界之間不應有空格。

看到下圖更好地理解。

你將如何實現它 - 利潤率，桌子......？

alt text

來源

2011-01-12 Emanuil Rusev

你可以給每一個第三項附加類？ – polarblau 2011-01-12 12:56:42

滿意使用css3？ – 2011-01-12 12:58:46

我認爲重要的是要知道你的元素（620px的dic）是什麼，以及你希望這個元素如何與鄰居進行交互，因爲如果你需要位置，做你想要的東西可能會有所不同：絕對或位置：相對等。 – 2011-01-12 13:00:47

，你可以嘗試以下方法，但這樣一來，你將不得不增加一個 '面具'，但沒必要對CSS3，也不添加/刪除類取決於項目的位置（換句話說，不需要任何類型的腳本，只需要純html/css）：

HTML：

<div class='mask'> 
    <div class='container'> 
     <div class='item'></div> 
     <div class='item'></div> 
     <div class='item'></div> 
     <div class='item'></div> 
    </div> 
</div>

CSS：

.mask{border:10px solid #ddd;width:620px;overflow:hidden} 
.container{width:630px;background-color:#333;margin-top:-10px;overflow:hidden;float:left} 
.item{float:left;margin-right:10px;width:200px;height:100px;background-color:#4a6b82;margin-top:10px}

試一下：Demo

來源

2011-01-12 13:55:15 Dan

無需表。除非是表格數據，否則。

浮動每個div，給它所需的寬度和邊距，並確保行中的最後一個div沒有此邊距。您可以使用類來完成此操作，也可以使用css :nth-child(3)僞選擇器。由於缺少對這個選擇器的支持，我會爲它推薦一個類。

還有一件事：如果所有的div都有相同的高度，這可以正常工作。如果他們不這樣做，您可能會在各種瀏覽器中遇到一些奇怪的定位。解決此問題的最佳方法是將每行的三個div放在一個行div中。

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="item"/> 
    <div class="item"/> 
    <div class="item last"/> 
    </div> 
    <div class="row"> 
    <div class="item"/> 
    <div class="item"/> 
    </div> 
</div>

CSS：

.item { float: left; width: 200px; margin-right: 10px; } 
.last { margin-right: 0; }

來源

2011-01-12 13:04:45

在網格中定位元素

回答

相關問題