gpt4 book ai didi

css - 用 CSS 包装盒子

转载 作者:技术小花猫 更新时间:2023-10-29 11:04:15 25 4
gpt4 key购买 nike

我正在尝试使用 CSS 布局解决经典的装箱/背包问题。

我想以最小化元素之间的空白的方式排列许多框,就像这样;

Image describing what I am trying to acheive
(来源:tydus.net)

CSS3 列在这里工作得很好 - 框按顺序排列,但所有空白都被有效地消耗掉了。有一个很小的问题 - 盒子被“剪切”或跨越多列。不能那样做。

我在一些框之后使用了经典的 div.clearer,但这没有任何效果 - 这些框仍然跨越那些 CSS3 列。有一个 column-span CSS 属性,但目前还没有任何浏览器支持它;(

可选地,我可以自己定义列并手动排列框,但实际上框的高度变化非常频繁。

最后一个问题:有没有一种方法可以使用纯 CSS 以最小化框之间的空白的方式排列框?

谢谢!

最佳答案

虽然我自己还没有尝试过,但一个可能的答案可能是使用 jQuery Masonry plugin .这似乎符合您陈述的要求。

用纯 CSS 和 HTML 做这件事会非常困难,你可能不得不放弃一些愿望/要求......

关于css - 用 CSS 包装盒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12075082/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com