我如何獲得浮動imgs填充所有空間

我有一些圖像寬度固定的大小。我希望他們能夠填補像一個網格，像這樣：我如何獲得浮動imgs填充所有空間

enter image description here

但不是這種情況：

enter image description here

我怎樣才能讓他們填寫的一切嗎？

HTML：

<div id="product-pics"> 
    <img src="img/dummy/282x282.png" alt="" class="tile" /> 
    <img src="img/dummy/566x282.png" alt="" class="tile" /> 
    <img src="img/dummy/282x282.png" alt="" class="tile" /> 
    <img src="img/dummy/282x282.png" alt="" class="tile" /> 
    <img src="img/dummy/282x566.png" alt="" class="tile" /> 
    <img src="img/dummy/282x282.png" alt="" class="tile" /> 
    <img src="img/dummy/282x282.png" alt="" class="tile" /> 
    <img src="img/dummy/282x282.png" alt="" class="tile" /> 
    <img src="img/dummy/566x282.png" alt="" class="tile" /> 
</div>

CSS：

.tile { 
    margin: 1px; 
    float: left; /* to remove the 4px gap between images */ 
}

來源

2012-09-04 Veltar

我認爲你需要在這裏使用了一些腳本，如http：//砌築。 desandro.com/ – fcalderan

砌體是要走的路。 – Endy

+1，以獲得清晰，簡潔的問題。 – Bojangles

使用CSS類insted的IMG標記，重複的圖像，下面的例子中第一個圖像，

.tile1 { 
background:url('img/dummy/282x282.png') repeat top left; 
width:100%; /* based on your area */ 
height:500px; /* based on the image height*/ 
}

而且檢查CSS中可用的不同「重複」選項。

來源

2012-09-04 11:45:55

我不認爲圖像是相同的。 –

這就是我爲第一課添加tile1的原因。請先閱讀答案。 –

您需要使用JavaScript來做到這一點。有一個名爲Masonry的優秀插件可以生成你想要的佈局。砌體使用jQuery，但有一個Vanilla Masonry端口沒有。

您面臨的問題是瀏覽器首先水平放置頁面，然後垂直放置頁面。砌體改變這一點，並創建一個列的佈局。

這個佈局也可以用CSS3 columns製作，但是瀏覽器的支持並不是很好（IE10 +，其他現代瀏覽器）。

來源

2012-09-04 11:48:07 Bojangles

在這種情況下，您需要更改一下HTML中的順序。先放282x566，然後只浮動一個。將剩下的部分留在左邊，它應該可以工作。

DEMO

重新排列HTML：

<div id="product-pics"> 
    <img src="img/dummy/282x566.png" alt="282x566" class="tile double-h right" /> 

    <img src="img/dummy/282x282.png" alt="282x282" class="tile" /> 
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" /> 
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" /> 
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" /> 

    <img src="img/dummy/566x282.png" alt="566x282" class="tile double-w" /> 
    <img src="img/dummy/282x282.png" alt="282x282" class="tile" /> 
</div>

相關CSS：

#product-pics { width: 852px; } 
.tile { 
    float: left; 
    width: 282px; 
    height: 282px; 
    margin: 0 2px 2px 0; 
} 
.right { float: right; } 
.double-h { height: 566px; } 
.double-w { width: 566px; }

來源

2012-09-04 12:07:14 Ana

我如何獲得浮動imgs填充所有空間

回答

相關問題