gpt4 book ai didi

具有已知子宽度的 CSS 两列

转载 作者:行者123 更新时间:2023-11-28 10:23:07 27 4
gpt4 key购买 nike

我创建了一些代码来显示不同高度的框(高度将来自内部图像)。

在这个例子中完美运行:http://jsfiddle.net/GSnfG/

...但是当我编辑一些高度(将来 - 图像高度)时,here: box 3 set to height 100px , 结果并不好。

如何准备 CSS 代码来创建类似两列的东西?

我不能使用表格,我也不想使用 jquery 或其他 js有可能吗?

最佳答案

不,如果没有 JavaScript 或服务器端语言,在一般情况中是不可能处理这个问题的。

在某些情况下,您可以为每个单独的列添加包装器 div,但是某些元素大小的组合会使这看起来很糟糕,例如:http://jsfiddle.net/suaaK/3/ - 在该演示中,如果 Box 6 在 Box 3 下方可能会更好。您拥有的元素越多(并且大小不同),列就会变得越不均匀。

请参阅此答案以比较候选技术,显示它们不起作用,还显示涉及服务器端代码的解决方案的客户端部分:

如果你愿意使用 JavaScript+jQuery,你应该使用 jQuery Masonry .

还有一个原始的 JavaScript 版本:Vanilla Masonry

演示:

关于具有已知子宽度的 CSS 两列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6003171/

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