HTML/CSS中的平鋪佈局

對於那些比我更瞭解CSS的人來說，這可能是一個沉重的打擊。HTML/CSS中的平鋪佈局

我正在嘗試創建一個CSS佈局，其中包含一些我希望像瓷磚一樣排列的元素。每個瓦片將是相同的寬度（雖然不同的高度），所以自然會自行安排成列，如圖這裏：

我想知道如何使每個元素在同一行高度相同。我不知道這個高度會是多少，因爲這些瓷磚的內容是（有點）動態的。理想情況下，瓷磚會像小提琴那樣流動，以便在更寬的屏幕上顯示更多的列，而在較窄的屏幕上顯示更少的列。可能有數十個瓦片。

這裏是小提琴所示的代碼：

HTML的現貨：

<ul> 
    <li class="e">Element 1</li> 
    <li class="e">Element 2 Taller item</li> 
    <li class="e">Element 3</li> 
    <li class="e">Element 4</li> 
    <li class="e">Element 5</li> 
    <li class="e">Element 6</li> 
    <li class="e">Element 7</li> 
    <li class="e">Element 8</li> 
</ul>

和CSS一丁點兒：

.e { 
    display: inline-block; 
    border: 1px solid black; 
    margin: 5px; 
    padding: 3px; 
    width: 120px; 
}

來源

2012-11-13 Watusimoto

我用jQuery來遍歷LI元素找到最高的那個，然後將這個高度應用於所有的LI。 http://jsfiddle.net/YvPwU/會這樣嗎？ – shaunsantacruz

我更喜歡CSS解決方案，因爲它看起來就像CSS設計的那樣。但是，腳本作爲第二選擇是可以接受的。 – Watusimoto

如果您更喜歡CSS，請查看以下問題的答案：http://stackoverflow.com/questions/2114757/css-equal-height-columns - 我相信那就是您要做的。 – shaunsantacruz

最後我使用的這個略加修改的JS腳本：

https://www.assembla.com/code/raysafedemo/subversion/nodes/WebSite/Scripts/jQuery.equalHeights.js?rev=107

由Scott Jehl，託德·帕克，和Maggie科斯特洛Wachs書面

來源

2014-02-03 16:35:57 Watusimoto

查找到，這是一個jQuery插件，做你在找什麼。

來源

2012-11-13 15:39:26 bookcasey

我已經看過這個，我找不到將東西排列成行並使元素高度相同的工具。我的項目會足夠統一，以至於「真正的石工」佈局看起來會馬虎。 – Watusimoto

思考你的問題，我認爲jQuery肯定會走的路。我做了搜索的一點點，並發現：

http://css-tricks.com/equal-height-blocks-in-rows/

從走馬看，它似乎是它會幫助你實現你的目標。

來源

2012-11-13 16:16:59

我需要看看這個。我希望得到一個簡單的CSS答案，但我已經相當JS重，所以再多一個腳本不會讓事情變得更糟。 – Watusimoto

HTML/CSS中的平鋪佈局

回答

相關問題