具有可变高度的4个兄弟元素:如何在1+2或3+4之间浮动/调整3+4到右侧，没有垂直间隙？

Question

我正在尝试将一个由四个兄弟元素堆叠在一起的CMS生成的页面转换为两列布局。下面是简化的生成标记：

<section id="element-container">
   <header id="element-1">Text header</header>
   <header id="element-2">Text subheader</header>
   <div id="element-3">Text validation messages</div>
   <form id="element-4">Form fields go here</form>
</section>

我需要一个左列，其中#element-1和#element-2堆叠在一起，另一列右列，其中#element-3和#element-4堆叠在一起。

我不能更改CMS生成的标记(例如添加更多嵌套级别的容器元素)。

在实际使用中，#element-4几乎总是比#element-1和#element-2的总高度长得多，尽管我们经常需要将一堆文本转储到#element-2中，使其比#element-4高。

只有CSS的解决方案需要通过分离( jQuery )或包装()等对元素的包装操作，以避免内容被重新排列的丑陋闪现；而且在被操作之前隐藏所有内容也是非常不可取的。对于我们的特定应用程序，快速/干净加载是绝对的首要任务。但是，我可以(仅)对#element-3 div执行某些类型操作，因为它包含对用户关于表单验证失败的反馈，因此它具有display:none和height:0px at page load。因此，我很乐意看到这样的解决方案：“只”在左边/顶部堆叠#element-1和#element-2，在右边/顶部堆叠#element-4 -从那里我可以找到处理#element-3的方法。

我今天花了一整天的时间尝试Floating 3rd element right while first 2 go left中的解决方案，它与我需要的非常接近，但所有这些问题的解决方案似乎都假定元素的高度是固定的，当不确定性引入高度时，就会中断。例如，如果你把div3设置为200px高，而不是100px高，那么div1和div2之间就会有很大的差距。

开放浮动，flexbox，任何东西。非常感谢。

Answer 1

通过在容器元素上使用column-count，可以很容易地强制使用两列布局。这将使浏览器根据高度自动将元素划分为您指定的任意数量的列，而不会在它们之间留下垂直空间。

在您的例子中，有两列，这基本上会自动确保#element-1在左边，#element-4在右边。问题变成了#element-2和#element-3在自动布局中的位置。如果前两个元素很小，那么元素3可能会出现在左列；或者，如果第一个元素很高，元素2、3和4足够小，那么它们可能会一起出现在右列中。

从你的描述中听起来，我们可能不必太担心元素2会在右列结束，所以我将重点放在强制元素3到右列。(如果前者是一个问题，那么最简单的解决方案是在元素2上使用min-height，但您可以尝试不同的选项。)

由于元素3是display: none to start，您可以做的一种选择是在显示它之前弄清楚它应该有多高，然后将其绝对定位在右列的顶部，同时将元素4向下移动与元素3的高度相同的量，以防止重叠。在下面的示例中，我在元素4上使用了一个简单的上边距。

在下面的示例中，元素3的高度是静态的，因此逻辑非常简单，但在实际情况中，您可能需要执行以下操作：

run validation

• add error messages to element 3

• set element 3 to display: block; visibility: hidden

• get validation

• add height of element 3

• offset element 4 by element 3's height

• set element 3 to visibility: visible

​

document.getElementById('element-4').style.marginTop =  `${document.getElementById('element-3').getBoundingClientRect().height}px`;

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

#element-container {
  column-count: 2;
  column-gap: 0px;
  position: relative;
}

#element-1, #element-2, #element-4 {
  display: inline-block;
  width: 100%;
}

#element-3 {
  display: block;
}

#element-1 {
  background-color: firebrick;
  padding: 40px 10px;
}

#element-2 {
  background-color: midnightblue;
  color: white;
  padding: 30px 10px;
}

#element-3 {
  background-color: gold;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
}

#element-4 {
  background-color: mediumaquamarine;
  padding: 160px 10px;
}

<section id="element-container">
   <header id="element-1">Text header</header>
   <header id="element-2">Text subheader</header>
   <div id="element-3">Text validation messages</div>
   <form id="element-4">Form fields go here</form>
</section>

​