在包装上应用不同的CSS样式

I can't for the life of me think of where to start here - basically what I want to achieve is a three column row, in which the columns can wrap below each other if they cannot fit horizontally. The height of the row should be the smallest to fit the items, with a fixed height when all the cells are in line. The contents of the "cells" should be centered vertically if the row is too large for them eg:

我不能为我的生活想到从这里开始 - 基本上我想要实现的是一个三列行,如果它们不能水平放置,列可以在彼此下面包裹。行的高度应该是最小的以适合项目,当所有单元格排成一行时具有固定的高度。如果行对于它们来说太大,“单元格”的内容应该垂直居中,例如:

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

Should wrap something like...

应该包装像......

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

Then...

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

The issue I'm running into is.. how can I shrink/grow the height of the "cells" to be the greater of their own content and their horizontal neighbours content?

我遇到的问题是......我如何缩小/增加“单元格”的高度,使其成为自己内容和横向邻居内容中的较大者?

The best idea I've had is to use JS to look at the offsetHeight to determine if they are on the same "row", then adjust the height accordingly.. but it seems a little clunky. Any better ideas?

我最好的想法是使用JS来查看offsetHeight以确定它们是否在同一个“行”上,然后相应地调整高度..但它看起来有点笨重。还有更好的想法?

Thanks guys!

3 个解决方案

#1

Something like this?

像这样的东西?

.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>

(see jsfiddle)

#2

You can use display:inline-block on each of those containing divs. that will make the height expand to the tallest div and it will wrap like you described

您可以在每个包含div的内容上使用display:inline-block。这将使高度扩展到最高的div,它将像你描述的那样包裹

#3

you can use this code, it will help you...

你可以使用这段代码,它会帮助你......

.selector {

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

}

#1