我該如何做到這一點？喜歡使用普通的HTML和CSS

有沒有什麼辦法可以在不使用jQuery的情況下完成這個任務？我該如何做到這一點？喜歡使用普通的HTML和CSS

enter image description here

圖像的寬度將來自小型，中型和大變化。產品將有一個大小的屬性。

我曾考慮過只使用左浮動，但不能使用，因爲大圖會強制左下兩次，直到下一行。

如果我必須使用jQuery，哪個插件是最好的？

編輯：列表的順序不同，這意味着圖片的大小將永遠不會在相同的位置。左浮動，浮動的權利不會工作，那麼

來源

2013-01-16 sindrem

是影像中的動態（在數量和大小）或列表將有總是正好8更小的圖像具有相同尺寸的以及具有相同維度的恰好1個大圖像？ –

它的一切都將是動態的 – sindrem

在這種情況下，我會建議使用砌體，如薩爾曼A的答案。 –

化妝盒將包含底4輛（小的）和浮動留下

來源

2013-01-16 09:28:00 bla0009

使用這個div strucure可能？所以，紅色具有最大寬度等都是50％

來源

2013-01-16 09:31:51

小圖和大圖的位置會有所不同，所以我不能猜測？ – sindrem

更好用一些js;）。 jquery masonry應該沒問題，就像有人建議的那樣。 –

我想多數民衆贊成在唯一的解決方案:)謝謝 – sindrem

可能是你正在尋找jQuery Masonry：

砌體是jQuery的動態網格佈局插件。把它想象成CSS浮點數的倒數第一邊。而浮動水平然後垂直地排列元素，砌體垂直排列元素，將每個元素定位在網格中的下一個開放點。結果最大限度地減少了不同高度元素之間的垂直間隙，就像牆上鑲嵌石塊的泥瓦匠一樣。

來源

2013-01-16 09:31:58

是的，這正是我想要的。但我只是好奇，如果沒有jQuery插件是不可能的。 – sindrem

沒有JQuery，總是有可能的...在最壞的情況下，你可以複製並粘貼JQuery的源代碼，它就可以工作。問題是 - 爲什麼要這樣做？ – tucuxi

您發佈的佈局可以用純HTML + CSS製作。但如果圖像尺寸不知道或者變化太大，我不能說。 –

嘗試以下結構

<div> 
     <img src="smallimg1/> 
     <img src="smallimg2/> 
     <img src="smallimg3/> 
     <img src="smallimg4/> 

     </div> 

     <div> 

    <div id="div1"> 
     <img src="smallimg1/> 
     <img src="smallimg2/> 
     <img src="smallimg3/> 
     <img src="smallimg4/> 
    </div> 
    <div id="div2"> 
     <img src="bigimg1/>   
    </div> 

</div>

CSS代碼

img 
{ 
float:left; 
} 
#div1 
{ 
width:50%; 
} 
#div2 
{ 
width:50%; 
}

來源

2013-01-16 09:45:59 Nandu

我該如何做到這一點？喜歡使用普通的HTML和CSS

回答

相關問題