Question

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

我尝试过：

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

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

Answer 1

对于这种布局，绝对定位非常成问题。我建议使用Flexbox布局。

为了实现此布局，我们将需要添加几个div。一个div用作第三列，我为它提供了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>

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

1 个答案: