html布局:如何垂直浮动div

前端之家收集整理的这篇文章主要介绍了html布局:如何垂直浮动div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何让div垂直浮动,如下图所示:

背景:我有一个包含内容按字母顺序排列的复选框,我想垂直排列字体顺序(因为水平顺序很难跟踪).所有的div都有相同的大小(宽度如图片,height = 1行大小).

更新:澄清:主要目的是根据可用的屏幕宽度拥有一个具有可变数量的列的表布局,并使单元格以列主要顺序.预先不知道实际的div数量.

解决方法

如果您愿意在固定单元格的表上设置固定高度,则可以使用flexBox.

将您的持有容器设置为:

display: flex;
flex-direction: column;
flex-wrap: wrap;

和你的孩子要素:

flex-grow: 20%;
min-width: 200px;

见笔:http://codepen.io/anon/pen/qIpAl

猜你在找的HTML相关文章