內嵌塊元素問題

我試圖製作一個類似於「地鐵」設計的屏幕原則上。內嵌塊元素問題

我在做的方式是所有的元素都是相同的寬度，但不是相同的高度。然後他們應該全部對齊頂部，並找出哪裏有空閒空間，不會在它們上面留下任何空間。

我遇到的問題是，如果我設置的元素，inline-block的他們提供這樣的： enter image description here

如果我將它們設置爲浮動，一邊期待權，但另一個沒有。下面是兩個浮動：左和float：右： enter image description here

下面是一個例子的小提琴： http://jsfiddle.net/paulocoelho/2qyrp/

梓代碼：

div{ 
    display:inline-block; 
    vertical-align:top; 
    margin:1px; 
    /*float:left;*/ 
} 

.smallBlock{ 
    height:50px; 
    width:50px; 
    background:blue; 
} 
.largeBlock{ 
    height:90px; 
    width:50px; 
    background:red; 
}

來源

2013-06-01 PCoelho

我也在尋找非JS解決方案...... – PCoelho

大瓷磚是否必須垂直拉長？ Windows 8風格將是水平的。 – lurker

我認爲Windows 8塊可以拉長兩種方式（垂直和水平）。對於這個例子，高度是可變的，但寬度是固定的。 – PCoelho

假設您希望這是動態的，那麼只能使用CSS3，使用多列，並且如果您需要響應，您需要媒體查詢。

我發現了一個tutorial，告訴你如何做到這一點，沒有自己測試過，但似乎它應該工作。

反正我會推薦你用JS來做這件事，你會對它有更多的控制，並且讓它成爲跨瀏覽器。

來源

2013-06-01 20:17:08 mfreitas

您給我的非CSS解決方案有效。這裏是小提琴：http://jsfiddle.net/paulocoelho/2qyrp/12/它的樂趣，因爲我也來自豐沙爾。哈！：P Obrigado :) – PCoelho

我很高興我能夠幫助你。這是一個小世界eheh :) – mfreitas

**只是對我以前的評論的更正。我修改非JS，而不是非CSS。 – PCoelho

結構佈局爲列，其垂直拉伸並依次用可變高度元素填充每列。

來源

2013-06-01 20:16:33 psyclr

內嵌塊元素問題

回答

相關問題