gpt4 book ai didi

css - 使用 CSS 平衡两列布局

转载 作者:行者123 更新时间:2023-11-28 11:51:12 25 4
gpt4 key购买 nike

我有以下页面:

<罢工> http://community.mediabrowser.tv/topics?category_id=5&status=published(示例不再相关,因为它包含修复)

由一堆div和class部分组成,其中包含一个ul的动态长度(有的短有的长):

<div id='section'>
<ul>
<li>an item</li>
....
</ul>
</div>

我想将 div 分成 2 列并使列平衡。我不希望任何一列中出现任何不合适的空白。

如果您查看原始链接,向右(或向左) float 和设置宽度并不能解决问题。

是否有解决此问题的纯 css 解决方案?如果做不到这一点,是否有针对此问题的 JavaScript 解决方案?

最佳答案

纯 css:唯一的方法是绝对定位每个 div。我最近使用了一个名为 masonry 的 JQuery 插件它使用绝对定位来实现这种效果。

或者,您可以使用两个 div,将您的部分分开:

<div id="left">
[3 or 4 sections]
</div>
<div id="right">
[3 or 4 sections]
</div>

很明显,此解决方案假定您的部分可以大致分为两半。

关于css - 使用 CSS 平衡两列布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2136820/

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