css布局问题？

Question

• 我需要实现一个布局，外层容器有固定宽度，没有固定高度，内层子元素数目无法确定，如何实现内层子元素的排列方式是先从上往下填充满第一列的所有行，再重左往右填充第二列的所有行，列的数目划分为四列

Answer 1

简单概括你的需求就是：

1. 父级容器有固定宽度，但是没有固定高度；
2. 子元素数量不定；
3. 期望按从上往下的方式排列，列数为4列；
4. 并且期望第一列的高度是最高的
5. 行数不定，按照子元素内容来判定；

总结来说就是瀑布流，如果不限制JS的话，其实很简单计算一下元素数量就好了，更近一步可以计算高度之后再布局。

如果只能用CSS的话，就会比较麻烦。不过可以提供一个大概的Demo：
纯CSS3 column 完成瀑布流效果

但是没有办法满足你的一个需求 期望第一列的高度是最高的

具体思路可以参考之前写的一篇笔记 纯CSS实现瀑布流布局