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

Question

修改

至于为什么我需要这种行为，将我的内容放在一个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提供。

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

Answer 1

为什么不利用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;
}

Answer 2

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

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")
        }
    });
}

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

这些方框非常贴合，并按正确的顺序放在页面上：

Answer 3

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