在包裝上應用不同的CSS樣式

我不能爲我的生活想到從哪裏開始 - 基本上我想要實現的是三列行，其中列可以在彼此下面纏繞，如果它們不適合水平。行的高度應該是最小的以適應項目，並且在所有單元格排成直線時具有固定的高度。「細胞」的內容應該如果行太大，對他們來說如垂直居中：在包裝上應用不同的CSS樣式

[   ] [ Big  ] [   ] 
[ Content1 ] [   ] [ Content2 ] 
[   ] [ Content ] [   ]

應該穿得像...

[   ] [ Big  ] 
[ Content1 ] [   ] 
[   ] [ Content ] 
     [ Content2 ]

則...

[ Content1 ] 
[ Big  ] 
[   ] 
[ Content ] 
[ Content2 ]

我遇到的問題是......如何縮小/增加「單元格」的高度，使其成爲他們自己的內容和其水平鄰居內容中的較大者？

我最好的想法是使用JS來看看offsetHeight，以確定它們是否在同一個「行」，然後相應地調整高度..但它似乎有點笨重。任何更好的想法？

謝謝你們！

來源

2015-07-13 Michael

像這樣的事情？

.row { 
 
    display: inline-flex; 
 
    flex-flow: row wrap; 
 
    justify-content: center; 
 
} 
 

 
.row div { 
 
    border: 1px solid; 
 
    margin: .5em; 
 
    display: flex; 
 
    flex-flow: column; 
 
    justify-content: center; 
 
} 
 

 
p { 
 
    margin: .5em; 
 
}

<div class="row"> 
 
    <div> 
 
     <p>Content 1</p> 
 
    </div> 
 
    <div> 
 
     <p>Big</p> 
 
     <p>Content</p> 
 
    </div> 
 
    <div> 
 
     <p>Content 1</p> 
 
    </div> 
 
</div>

（見jsfiddle）

來源

2015-07-13 06:30:16

美麗 - 只是..漂亮:)我必須閱讀flex-flow/inline-flex等。因爲我之前沒有和他們一起玩過，但是這個沒有任何JS就完全是我想要的。謝了哥們！ – Michael

您可以在每個包含div的使用display:inline-block。這將使高度擴展到最高DIV，它會像包裹你描述

來源

2015-07-13 02:34:55

感謝回答，但除非我失去了一些東西..這似乎不是這樣的情況[的jsfiddle（HTTP：// jsfiddle.net/v3wjtqxf/） – Michael

@伊利亞的答案（使用彈性框）是一個更好的解決方案。 Flexbox爲您可能想要進行的更改提供更多佈局控制。 –

您可以使用此代碼，它會幫助你...

.selector { 

display:inline-flex; 
justify-content:center; 
max-width:(expected width); 
max-height:(expected height); 
width:100%; 
height:100%; 
margin:auto; 

}

來源

2015-07-13 03:27:07

感謝您的回覆，但這似乎並不奏效。只有在父容器上設置了明確的高度時才設置高度，如果情況如此，則較小的塊在它們不會「收縮」時換行。 [JSFiddle]（http://jsfiddle.net/7gev60dt/2/） – Michael

http://codepen.io/jrey/pen/mJKdbj herels更新的代碼，你想:) –

謝謝，但仍然沒有骰子，如果你強制「大內容」元素變大（例如通過插入中斷），同一行上的其他元素不會增長以匹配大小。如果你感興趣的話，llya的答案完美無缺。 – Michael

在包裝上應用不同的CSS樣式

回答

相關問題