时间戳

首页 > 解决方案 > 如何连续对齐 3 个分区，以使最后一个元素位于页面的中间？

html - 如何连续对齐 3 个分区，以使最后一个元素位于页面的中间？

问题描述

如何将 3 个 div 连续对齐，等间距，以使最后一个（最右边的）元素位于页面的中心？

标签： htmlcssformatting

解决方案

我认为这就是您要寻找的东西https://jsfiddle.net/o8z6exn5/2/

将包装器设置为50vwthendisplay: flex;并 justify-content: space-between;在屏幕左侧等距放置元素。

HTML

<div class="wrapper">
  <div class="align">

  </div>
  <div class="align">

  </div>
  <div class="align">

  </div>
</div>

CSS

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 50vw;
}

.align {
  height: 10px;
  width: 10px;
  background-color: red;
}

推荐阅读