Html 纯css上具有不同动态高度组件的报纸样式网格

让我从一个基于

display:flex


#容器{
显示器：flex；
调整项目：灵活启动；
柔性包装：包装；
宽度：150px；
}
.内容{
边框：1px纯黑；
显示：内联块；
填充物：5px；
}

内容
内容
大
内容
内容
内容
内容
内容
内容
您使用的
列属性是正确的。要解决列中的项目跨列拆分的问题，可以将每个列项目包装在另一个具有
display:inline block
的元素中

确保将
内联块
元素设置为100%宽度，或将其包裹在另一个具有块类型显示的元素中（
块
，
柔性
，
网格
），以防止两个特别小的孩子在一个柱内并排坐着。（除非这是你想要的。）


#容器{
列数：2；
柱间距：20px；
宽度：160px；
}
.内容外部{
宽度：100%；
显示：内联块；
}
.内容{
宽度：100%；/*与列（而不是整个容器）相关的宽度*/
边框：1px纯黑；
填充物：5px；
}

内容
内容
大
内容
内容
内容
内容
内容
内容
谢谢！那很有趣。你能解释一下为什么这样做吗？@АСаааЧаааааааааааааааааа。您可以想象，允许其中任何一个跨列拆分是多么没有意义。只允许块级元素在列之间断开，从而允许在列之间分割其子元素。因此，通过这种方式，您可以两全其美–您的元素不会在列之间分割，但仍将作为一个块用于布局目的。@АааааЧааааааааЧаа1072。