Question

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

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

应该包装像......

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

则...

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

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

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

谢谢你们！

Answer 1

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

Answer 2

这样的东西？

＆＃13;

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

＆＃13;

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

＆＃13;

（见jsfiddle）

Answer 3

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

.selector {

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

}

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

3 个答案: