如何让 div 以最紧凑的方式垂直对齐？

Posted 2023-03-05

【中文标题】如何让 div 以最紧凑的方式垂直对齐？

【英文标题】：How do I get divs to vertically align in the most compact manner?

【发布时间】：2014-09-30 22:37:34

【问题描述】：

编辑

至于为什么我需要这种行为，将我的内容放在一个 div 中意味着所有内容在网页和 html 中都是按时间顺序排列的。这意味着当内容显示在小屏幕上并且列合并为一个时，内容仍然按时间顺序排列。

                1 div -->  1                2 divs  -->  1
                1 | 2      2                1 | 2        3
                3 | 4      3                3 | 4        5
                5 |        4                5 |          2
                           5                             4

---

在我的website 上，我有两列内容，每列占宽度的 50%。内容被组织成框，当您单击其标题时，可以切换以隐藏/显示内容。

当右边的一个盒子被最小化时，它下面的盒子会填充创建的空白，留下正确的间距：

但是，当左侧的一个框被最小化时，它与下一个框之间会留下一个间隙，相对于右侧相邻框的大小：

div排列的一些伪代码：

<div class="full_width">
    <div class="box">       <-- box 1
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">       <-- box 2
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">       <-- box 3
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
</div>

据我了解，在这种情况下，由于 html 中内容的顺序，框 3 不能位于框 2 的底部上方，有什么办法解决这个问题吗？

我对 javascript 解决方案很满意，因为这只会在启用了 javascript 的页面上出现问题。

注意事项

-您需要 javascript 和一个宽度超过 1000 像素的监视器才能在我的网站上实时查看问题，因为列折叠成低于该宽度的 1，并且隐藏/显示功能由 javascript 提供。

-我可以通过拥有两个不能改变方向的独立内容列来解决这个问题，但这不是我想要的功能。

【参考方案1】：

我不明白你为什么不想要 2 个单独的 div，每列一个？这仅适用于 CSS 端，您可以从左到右反转。

【讨论】：

如果有一个单独的 div，每列一个，那么内容将无法换边。

为了将来参考，您在这里的回答会更好作为对问题的评论，而不是答案 =]

【参考方案2】：

为什么不利用 CSS3 列？下面的好处是它们也会在较小的屏幕尺寸下响应折叠（您可能需要更改下面的内容以适应我们的目的）：

HTML

<div class='full_width'>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
    <div class="box">
        <h1>Heading</h1>
        <div>Content.</div>
    </div>
</div>

CSS

html, body 
    width:100%;
    margin:0;
    padding:0;

.full_width
    -webkit-column-width: 20em;
    -webkit-column-gap: 2em;
    -webkit-column-count: 2;
    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-count: 2;
    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-count: 2;
    column-width: 20em;
    column-gap: 2em;
    column-count: 2;

.box
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    width:100%;
    box-sizing:border-box;

.box(:first-of-type) 
    margin: 20px 0;

【讨论】：

我 / 真的 / 试图让它工作，但这种行为是如此不直观......它与页面认为它的高度相混淆，以一种看似随机的方式，它有时会剪切随机部分左列中的内容并将它们放入右列，除非这样做，它会忽略列的开始位置，并且它还会忽略我的旧响应代码，当页面太窄时，它会将列折叠成单个列。跨度>

如果页面中没有更广泛的代码，很难解决您的问题。只需将上述内容放入例如jsfiddle，注意到的行为不会发生。这里可能还有其他冲突的风格:(

我的页面的其余部分实际上并不显眼，我看不出它有干扰，我与您上面写的非常接近，而且我可以重新创建一些我的问题我面对，在一个jsfiddle。元素顺序错误，右列忽略填充：jsfiddle.net/Troyseph/ng0pkoqr

【参考方案3】：

我编写了这个函数并在页面第一次加载时调用它，然后每当一个框完成改变大小时调用它，这是一个非常简单的函数。

function column_align() 
    $('.box').each(function() 
        // if box on left of screen
        if ($(this).offset().left < 50) 
            $(this).css("float", "left");
         else 
            $(this).css("float", "right")
        
    );

在我们遇到这个对齐问题之前：

这些盒子很贴合，并且在页面下方按正确的顺序排列：