css布局问题？
站长
· 阅读数 15
- 我需要实现一个布局，外层容器有固定宽度，没有固定高度，内层子元素数目无法确定，如何实现内层子元素的排列方式是先从上往下填充满第一列的所有行，再重左往右填充第二列的所有行，列的数目划分为四列
回复
1个回答
test
2024-07-11
简单概括你的需求就是：
- 父级容器有固定宽度，但是没有固定高度；
- 子元素数量不定；
- 期望按从上往下的方式排列，列数为4列；
- 并且期望第一列的高度是最高的
- 行数不定，按照子元素内容来判定；
总结来说就是瀑布流，如果不限制JS的话，其实很简单计算一下元素数量就好了，更近一步可以计算高度之后再布局。
如果只能用CSS的话，就会比较麻烦。不过可以提供一个大概的Demo：纯CSS3 column 完成瀑布流效果
但是没有办法满足你的一个需求 期望第一列的高度是最高的
具体思路可以参考之前写的一篇笔记 纯CSS实现瀑布流布局
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容