html - 如何将内联元素与带有 50vw 的居中 div 的一侧对齐，以便它正确调整大小？

Question

我有一个 div，它始终设置为页面宽度的 50%，并且居中。我想在它的一侧添加一个元素，以便该元素接触 div 的左边缘(在不同的屏幕尺寸上)。该元素具有固定的最大宽度。

我试过:

#element {
  position: absolute;
  align: left;
  padding-left: 3vw;
}

它适用于大多数常见的屏幕尺寸，但当我变得非常小或非常大时，元素要么与 div 重叠，要么存在间隙。理想情况下，我希望元素能够粘在 div 的一侧。

Answer 1

绝对定位对于这种布局来说是非常有问题的。我建议使用 flexbox 布局。

为了实现这种布局，我们需要添加几个 div。一个 div 作为第 3 列，我给它类 ghost 因为它不会包含任何内容，尽管此处的演示使用红色边框以便您可以看到它。

我添加的另一个 div 将您要粘贴到中间 div 的特殊元素包裹起来。因此元素包装器 (.element-wrap) 是一个 flex 子元素，而不是元素本身。

接下来，给这3个div的容器display: flex，把它变成一个flexbox容器:

section {
  display: flex;
  align-items: center; /* vertical alignment */
  justify-content: center; /* horizontal alignment */
}

align-items 属性允许您垂直对齐其中的元素，而 justify-content 允许您水平对齐它们。

中间的 div，我给它一个蓝色背景，当然会在布局的中间，并保持其宽度为 width: 50vw;。侧面的 2 个 div 应用了一个类 .flex-child，它获得了这个 CSS:

.flex-child {
  flex-grow: 1;
  flex-basis: calc((100% - 50vw) / 2);
}

flex-grow: 1 允许那些侧面的 div 随着屏幕的大小而扩展。 flex-basis 规则确定起始大小，我在这里使用 calc() 函数动态计算宽度。

现在，黄色背景的特殊元素需要放在蓝色背景旁边，这是通过将其包装 div 也变成一个 flexbox 并将内容右对齐来实现的:

.element-wrap {
  display: flex;
  justify-content: flex-end;
}

* { box-sizing: border-box; }

section {
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* just for demo */
  background: #eee;
}

.flex-child {
  flex-grow: 1;
  flex-basis: calc((100% - 50vw) / 2);
  
  /* just for demo */
  border: 1px solid red;
}

.half-screen {
  width: 50vw;
  min-height: 300px;
  background: dodgerblue;
}

.element-wrap {
  display: flex;
  justify-content: flex-end;
}

.element {
  /* just for demo */
  background: yellow;
}

<section>
  <div class="flex-child element-wrap">
    <div class="element">
      ELEMENT that we are<br>
      getting to stick to the side<br>
      of the 50vw div.
    </div>
  </div>
  <div class="half-screen">
    50vw DIV
  </div>
  <div class="flex-child ghost"><!-- nothing here --></div>
</section>