佔據以前的div

的底部的自由空間尋找以下HTML代碼，佔據以前的div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<style> 
.numbercontainer{ 
    float:left; 
    width:220px; 
} 
.number{ 
    float:left; 
    width:100px; 
    margin-right: 10px; 
} 
.head{ 
    float:left; 
    width:100px; 
    background-color:#29ABE2; 
} 
li { 
    margin-left: 20px; 
} 
</style> 
</head> 
<body> 
    <div class="numbercontainer"> 
     <div class="number"> 
      <div class="head">One</div> 
      <li>1</li> 
     </div> 
     <div class="number"> 
      <div class="head">Two</div> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
     </div> 
     <div class="number"> 
      <div class="head">Three</div> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
     </div> 
     <div class="number"> 
      <div class="head">Four</div> 
      <li>1</li> 
     </div> 
     <div class="number"> 
      <div class="head">Five</div> 
      <li>1</li> 
      <li>2</li> 
     </div> 
     <div class="number"> 
      <div class="head">Six</div> 
      <li>1</li> 
      <li>2</li> 
     </div>  
    </div> 
</body> 
</html>

在此示例中我已經顯示在div（類=「數」）元件在每行明智2列的列。一，二排在第一排，然後是三排，四排...... 第一格「一」內容較少，所以其高度較小，兩個內容較多，所以其高度較大。由於第二個div有更高的高度，第一行需要第二個div高度。現在第三個div出現在第二行，我希望它從第一行的第一個div佔據空的未使用空間。

我該如何寫風格？

Regards， karthik。

來源

2013-02-06 Karthik

這是一個有點難以明白你的意思。你可以請創建一個[jsfiddle]（http://jsfiddle.net/）？ –

@Aaron：jsfiddle鏈接：http://jsfiddle.net/2jk6U/我需要第一行第一列需要佔用第一行第一列的空白空間。這個怎麼做？ – Karthik

左側立柱浮到左，右列浮動到右：

http://jsfiddle.net/2jk6U/1/

.number{ 
    width:100px; 
    margin-right: 10px; 
} 
.number:nth-child(odd) { 
    float:left; 
} 
.number:nth-child(even) { 
    float:right; 
}

，如果你需要更高的跨瀏覽器的兼容性，添加類=「連」和class =「奇」到相應的元素。與造型搭配：

http://jsfiddle.net/2jk6U/2/

.number{ 
    width:100px; 
    margin-right: 10px; 
} 
.number.odd { 
    float:left; 
} 
.number.even { 
    float:right; 
}

來源

2013-02-06 09:04:44

我如何做到這一點，如果每行4列？ – Karthik

在這種情況下，您必須使用名爲「瀑布」的技術，動態地計算每個div的位置，如pinterest.com。當然，您可以使用第三方插件/庫文件來實現它。像http://masonry.desandro.com/ –

http://jsfiddle.net/2jk6U/3/如何做到這一點？ – Karthik

佔據以前的div

回答

相關問題