爲什麼浮動：左側沒有填補空白

我想創建一個可以有兩個不同尺寸框的網格。底行的最後兩張圖片應該出現在最左邊，但它們出現在前一行的大圖片之後。爲什麼浮動：左側沒有填補空白

enter image description here

我怎樣才能獲得最後兩個項目從左邊開始，以填補所有的空間？

HTML

<div class="portfolio"> 
<ul id="grid"> 
    <li class="big"><a href="newgrid.html"><img src="http://asn.aerosoft.com/wp-content/uploads/2013/02/blue_sky_scenery_shelter_cove-32699_200x200.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li class="big"><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
    <li><a href="newgrid.html"><img src="http://www.chinaodysseytours.com/images/andy/guilin-dusk-scenery.jpg"></a></li> 
</ul> 
</div>

CSS

.portfolio { 
    padding: 20px; 
    margin: 20px auto 0; 
    width: 840px; 

    border: 1px solid blue; 
    } 

ul#grid { 
    list-style: none; 
    margin: 20px auto 0; 
    width: 840px; 
    /*border: 1px solid red;*/ 
    } 

#grid li { 
    float: left; 
    margin-right: 1px; 
    width: 100px; 
    height: 100px; 
    } 


#grid li a:hover img { 
    opacity:0.3; filter:alpha(opacity=30); 
    } 

#grid li img { 
    background-color: white; 
    border: 1px solid #58595b; 
    width: 100%; 
    height: 100%; 
    } 

#grid li.big { 
    width: 201px; 
    height: 201px; 
} 

#grid li.big img { 
    width: 201px; 
    height: 200px; 
} 

#grid li a { 
    display: block; 
    }

來源

2013-07-14 Imran

建議 - 有四列。然後用你喜歡的元素填充每一列。這裏有一個大致說明這個概念的jsFiddle。

HTML：

... 
<div class="column"> 
    <li class="big"><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li> 
    <li><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li> 
    <li><a href="newgrid.html"><img src="http://bit.ly/15Ey5IU"></a></li> 
</div> 
...

CSS：

.column { 
    border: 2px solid black; 
    height: 600px; 
    background: lime; 
    width: 202px; 
    display: inline-block; 
}

來源

2013-07-14 04:26:49 acudars

在一個容器中最理想的安排是盒子的NP完全問題和float:left是不會爲您解決。

如果你只是想貪婪地確保頁面的左側被填充，那麼你將不得不大量使用絕對定位和JavaScript來解決這個問題。

這個人在這裏（http://codeincomplete.com/posts/2011/5/7/bin_packing/）似乎已經寫了一些JavaScript代碼，以便生成CSS精靈的目的打包圖像。你可以修改他的代碼，爲圖片添加一些填充，然後將其用於自己的目的。

你也可以強制頁面上的列數，並根據它們的高度像pinterest和ebay和其他類似的網站那樣包裝東西

來源

2013-07-14 04:32:17 Sanchit

爲什麼浮動：左側沒有填補空白

回答

相關問題