使divs換行到下一行，無論它們的大小

右，基本上，我有一個網上商店的設置，從數據庫中提取所有項目，然後將它們打印爲div，以便它們可以很好地對齊在一起。我的問題是，我不知道如何讓他們很好地包裝在他們的容器中：http://puu.sh/5j4Er.png 使divs換行到下一行，無論它們的大小

任何有關如何完成這些任務的一般提示？正如你從屏幕截圖中看到的那樣，其中兩個div仍然停留在右側，可能是因爲左側更大。

的容器是：

<div style='padding-bottom: 140px; display: block; float: left; margin-top: 20px; width: 100%;'><h2 style='margin-bottom:20px;'>$desc</h2>

而且每格爲：

<div style='width:".$size."px; display: block; margin-top: 10px; float: left;'> 
          <table width='".$size."px' cellspacing='10'> 
           <tr> 
            <td colspan='2'><a href='$shop?buy=$id'><h2>$item[name]</h2></a></td> 
           </tr> 
           <tr> 
            <td><a href='$shop?buy=$id'><img src='$item[img]' style='width:64px;height:64px;-webkit-box-shadow:rgba(0, 0, 0, 0.496094) 3px 3px 3px;border-bottom-color:#333366;border-bottom-width:2px;border-color:initial;border-left-color:#333366;border-left-width:2px;border-right-color:#333366;border-right-width:2px;border-style:initial;border-top-color:#333366;border-top-width:2px;box-shadow:rgba(0, 0, 0, 0.496094) 3px 3px 3px;padding-bottom:1px;padding-left:1px;padding-right:1px;padding-top:1px;' /></a></td> 
            <td><a href='$shop?buy=$id'><h3><b>Prix:</b> $item[price]</h3></a>$item[description]</td> 
           </tr> 
          </table> 
         </div>

任何提示嗎？ :)

謝謝！馬克

來源

2013-11-15 Pr4w

避免內聯樣式。你的代碼很難閱讀。 – matewka

您**需要**才能開始使用.css樣式表。 –

找出你的容器的寬度。將div的寬度乘以3. 從容器的寬度減去該寬度。除以2.

這是第一列和第二列右側的填充。然後使用css nth-child（）選擇器從所有具有3的倍數的子div中移除填充以消除第3列中的填充，使它們不會浮動到下一行。

來源

2013-11-15 15:49:56 Anthony

行爲最可能的原因是第一個div容器（「Citoyennete sur Aerium」）的高度大於以下div容器（「Adoptez une chauve-souris」）。

因此，第4個div容器放置在第1個容器的右邊緣。

爲了演示這一點，在div容器中添加邊框/輪廓以查看邊緣。

您需要將所有div容器設置爲相同高度才能避免此問題。

來源

2013-11-15 15:51:10

將您的div，而不是容器，從float:left切換到display:inline-block。

http://jsfiddle.net/TreeTree/EK2H8/

div { 
    width:200px; 
    background:orange; 
    display:inline-block; 
    /*float:left;*/ 
    margin-right:10px; 
    margin-bottom:10px; 
    vertical-align:top; 
}

如果取消對float行，你應該能夠重現您遇到的問題。 inline-block將始終從左到右在上一行的最高元素下方。

來源

2013-11-15 15:53:12 TreeTree

使divs換行到下一行，無論它們的大小

回答

相關問題