浮動div問題

Question

我有浮動div的問題。我有一個固定寬度的容器st，並且裏面的子元素都是div元素。我想要的是，我需要連續顯示兩個元素。我寫的代碼如下。

CSS

#container 
    { 
     width: 400px; 
    } 
    .item1 
    { 
     width: 180px; 
     height: 200px; 
     border: 1px solid red; 
     float: left; 
     margin: 10px 0 0 10px; 
    } 
    .item2 
    { 
     width: 180px; 
     height: 250px; 
     border: 1px solid red; 
     float: left; 
     margin: 10px 0 0 10px; 
    } 

HTML

<div id="container"> 
     <div class="item1">1</div> 
     <div class="item1">2</div> 
     <div class="item1">3</div> 
     <div class="item1">4</div> 
     <div class="item1">5</div> 
     <div class="item1">6</div> 
     <div class="item1">7</div> 
     <div class="item1">8</div> 
     <div class="item1">9</div> 
    </div> 

這可以在Demo1

觀看，但我想是這樣的result。唯一的事情是單個項目的高度可能不同。

希望我已經明確了一切。

預先感謝

內容元素將被在服務器動態生成和將被傳遞到客戶端的其他說明。

另外的順序應該是這樣1,2,3,4，...

的唯一的事情是，在一排應該有兩個項目，第一個應該對齊到左側集裝箱。

Answer 1

你不能用CSS做到這一點，但有一個jQuery插件可以做到這一點。這就是所謂的jQuery Masonry，試試看

Answer 2

你需要第二個包裝：

<div id="container"> 
     <div class="wrapper"><div class="item1">1</div></div> 
     <div class="wrapper"><div class="item1">2</div></div> 
     ... 
</div> 

浮動的包裝，並給它一個固定的大小。裏面的物品可以有自己的高度。

我更喜歡使用這種類型的東西的列表。更好的HTML語義。

<div class="container"> 
    <ul> 
     <li><div class="item1">1</div></li> 
     <li><div class="item2">2</div></li> 
    </ul> 
</div> 

風格：

.container ul { 
    width:400px; 
} 

.container li { 
    float:left; 
    height:200px; 
    width:180px; 

} 

Answer 3

你指定ITEM2比物品1寬10個像素，所以我不上你想做什麼明確....

Answer 4

如果你想每對項目是在一個行，你必須在動態生成的內容的控制，看到我的編輯你的小提琴here

總結：

標記 -

<div id="container"> 
    <div class="itemrow"> 
     <div class="item1">1</div> 
     <div class="item1">2</div> 
    </div> 
    <div class="itemrow"> 
     <div class="item2">3</div> 
     <div class="item1">4</div> 
    </div> 
    <div class="itemrow"> 
     <div class="item2">5</div> 
     <div class="item1">6</div> 
    </div> 
    <div class="itemrow"> 
     <div class="item1">7</div> 
     <div class="item2">8</div> 
    </div> 
    <div class="itemrow"> 
     <div class="item1">9</div> 
    </div> 
</div> 

CSS -

#container 
    { 
     width: 400px; 
    } 
    .itemrow 
    { 
     float: left; 
     clear: both; 
    } 
    .item1 
    { 
     width: 180px; 
     height: 200px; 
     border: 1px solid red; 
     float: left; 
     margin: 10px 0 0 10px; 
    } 
    .item2 
    { 
     width: 190px; 
     height: 250px; 
     border: 1px solid red; 
     float: left; 
     margin: 10px 0 0 10px; 
    } 

編輯：剛纔閱讀你上面有關編輯服務器端邏輯進行渲染的評論。顯然這隻有在你可以控制的情況下才有效。