时间戳

首页 > 解决方案 > 将 3 个不相等的块左、中、右对齐

css - 将 3 个不相等的块左、中、右对齐

问题描述

我正在尝试对齐由 3 个内容块组成的顶部菜单。

我想要实现的是：

如果所有 3 个块的大小相同，我可以使用 flexbox（如代码段中所示），但它们不是，所以它不会产生我需要的输出。

相反，flexbox 在 3 个块之间放置相等的空间 - 导致中间块偏离中心对齐。

我想知道这是否可以通过 flexbox 来实现，或者如果不能，另一种解决方案。这需要在生产中稳健地工作，因此“网格”解决方案不适用，因为支持不足。

.container {
  margin: 20px 0;
}

.row {
  background-color: lime;
  display: flex;
  justify-content: space-between;
}

.item {
  background-color: blue;
  color: #fff;
  padding: 16px;
}
<div class="container">
  <div class="row">
    <div class="item">left, slightly longer</div>
    <div class="item">center, this item is much longer</div>
    <div class="item">right</div>
  </div>
</div>

标签： cssflexbox

解决方案

你可以考虑flex-grow:1;flex-basis:0%为left和right元素然后text-align用来对齐里面的内容。我添加了一个额外的包装器以仅将背景保留在文本周围。

诀窍是通过仅删除中间内容并将其平均拆分为左右元素来计算可用空间。

.container {
  margin: 20px 0;
  padding-top:10px;
  background:linear-gradient(#000,#000) center/5px 100% no-repeat; /*the center*/
}

.row {
  background-color: lime;
  display: flex;
  color: #fff;
}

.item:not(:nth-child(2)) {
  flex-basis: 0%;
  flex-grow: 1;
}

.item:last-child {
  text-align: right;
}

.item span{
  background-color: blue;
  display:inline-block;
  padding: 16px;
  border: 2px solid red;
  box-sizing:border-box;
}
<div class="container">
  <div class="row">
    <div class="item"><span>left, slightly longer</span></div>
    <div class="item"><span>center, this item is much longer</span></div>
    <div class="item"><span>right</span></div>
  </div>
</div>

您也可以通过保持元素关闭来执行相同的操作。只需调整文本对齐：

.container {
  margin: 20px 0;
  padding-top: 10px;
  background: linear-gradient(#000, #000) center/5px 100% no-repeat; /*the center*/
}

.row {
  background-color: lime;
  display: flex;
  color: #fff;
}

.item:not(:nth-child(2)) {
  flex-basis: 0%;
  flex-grow: 1;
}

.item:first-child {
  text-align: right;
}

.item span {
  background-color: blue;
  display: inline-block;
  padding: 16px;
  border: 2px solid red;
  box-sizing: border-box;
}
<div class="container">
  <div class="row">
    <div class="item"><span>left, slightly longer</span></div>
    <div class="item"><span>center, this item is much longer</span></div>
    <div class="item"><span>right</span></div>
  </div>
</div>

推荐阅读