左、中、右对齐 3 个不相等的块 [英] Align 3 unequal blocks left, center and right

查看:29
本文介绍了左、中、右对齐 3 个不相等的块的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我想要实现的是:

  • 块 1:左对齐
  • 块 2:水平居中
  • 块 3:右对齐

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

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

我想知道这是否可以通过 flexbox 来实现,或者如果不能,另一种解决方案.这需要在生产中稳健运行,因此网格"解决方案不适用,因为支持不足.

.container {边距:20px 0;}.排 {背景颜色:石灰;显示:弹性;对齐内容:间隔;}.物品 {背景颜色:蓝色;颜色:#fff;填充:16px;}

<div class="row"><div class="item">向左,稍长</div><div class="item">center,这个item要长很多</div><div class="item">right</div>

解决方案

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

诀窍是通过仅移除中间内容并将其平均分配给左右元素来计算可用空间.

.container {边距:20px 0;填充顶部:10px;背景:线性渐变(#000,#000)中心/5px 100% 不重复;/*中心*/}.排 {背景颜色:石灰;显示:弹性;颜色:#fff;}.item:not(:nth-child(2)) {弹性基础:0%;弹性增长:1;}.item:last-child {文本对齐:右;}.项目跨度{背景颜色:蓝色;显示:内联块;填充:16px;边框:2px纯红色;box-sizing:border-box;}

<div class="row"><div class="item"><span>向左,稍长</span></div><div class="item"><span>center,这个item要长很多</span></div><div class="item"><span>right</span></div>

您也可以通过保持元素关闭来做同样的事情.只需调整文本对齐:

.container {边距:20px 0;填充顶部:10px;背景:线性渐变(#000,#000)中心/5px 100% 不重复;/*中心*/}.排 {背景颜色:石灰;显示:弹性;颜色:#fff;}.item:not(:nth-child(2)) {弹性基础:0%;弹性增长:1;}.item:第一个孩子{文本对齐:右;}.项目跨度{背景颜色:蓝色;显示:内联块;填充:16px;边框:2px纯红色;box-sizing: 边框框;}

<div class="row"><div class="item"><span>向左,稍长</span></div><div class="item"><span>center,这个item要长很多</span></div><div class="item"><span>right</span></div>

I'm trying to align a top menu which consists of 3 blocks of content.

What I'm trying to achieve is this:

  • block 1: left aligned
  • block 2: centered horizontally
  • block 3: right aligned

If all 3 blocks were the same size, I could use flexbox (as in the snippet), but they're not, so it doesn't produce the output I require.

Instead, flexbox puts equal space between the 3 blocks - resulting in the middle block being aligned off-center.

I was wondering if this could be achieved with flexbox, or if not, another solution. This needs to work robustly in production so a 'Grid' solution is not applicable as there is insufficient support.

.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>

解决方案

You can consider flex-grow:1;flex-basis:0% for the left and right elements then use text-align to align content inside. I have added an extra wrapper to keep the background only around the text.

The trick is to calculate the free space by removing only the middle content and split it equally to the left and right element.

.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>

You can also do the same by keeping the element close. Simply adjust 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: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>

这篇关于左、中、右对齐 3 个不相等的块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆