爲什麼div不會排隊，如何讓他們？

我試圖爲3個大小相等的div製作我自己的網格系統，目標是讓它們保持在1024px的屏幕/設備寬度的同一行，甚至可能在較低的寬度。出於某種原因，但在1024個像素的div不同步，但在更高的寬度細，儘管自己不佔1,024像素的總數，我使用的引導與我的代碼太（下面的代碼） -爲什麼div不會排隊，如何讓他們？

HTML

<div clss="row-fluid"> 
<div id="box" class="span12"> 

    <div class="grid"> 

    <div class="b b1"> 

     <div class="module"> 
     <h2> 
     IMPORTANT TITLE GOES HERE 
     </h2> 
     </div> 

    </div> 

    <div class="b b2"> 

     <div class="module"> 
     <h2> 
     IMPORTANT TITLE GOES HERE 
     </h2> 
     </div> 

    </div> 

    <div class="b b3"> 

     <div class="module"> 
     <h2> 
     IMPORTANT TITLE GOES HERE 
     </h2> 
     </div> 

    </div> 

    </div>  

</div> 
</div>

CSS -

*, { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 



#box{ 
    max-width: 1024px; 
    min-width: 250px; 
    margin: 30px auto; 
    background: #111; 
} 

.grid { 
    overflow: hidden; 
} 
.grid .b{ 
    float: left; 
} 

.grid .b1 { 
    max-width: 341px; 
    min-width: 250px; 
    height: 200px; 
    background: blue; 
} 
.grid .b2 { 
    max-width: 341px; 
    min-width: 250px; 
    height: 200px; 
    background: red; 
} 
.grid .b3 { 
    max-width: 341px; 
    min-width: 250px; 
    height: 200px; 
    background: green; 
} 

.module { 
    padding-top: 20%; 
}

所以我要去哪裏錯了，我該如何解決？

來源

2013-02-04 idekman

我還應該補充一點，他們適合當我減少最大寬度從341到340 – idekman

基本上你需要做的就是使用css屬性'float'和'clear'。

看看這個JSFiddle這裏。

對於這個例子我只是針對所有div的如下所示，但顯然你會改變這個目標的個人，你需要不是所有的div在頁面上。

div { 
    float:left; 
    clear:left; 
}

希望這會有所幫助！

來源

2013-02-04 03:45:07 Epik

爲什麼div不會排隊，如何讓他們？

回答

相關問題