html - 如何根据其他 2 个元素对齐元素？

Question

我正在尝试对齐 Flexbox 中的 3 个元素。为了使事情更容易，这是当前的布局

这里的目标是保持数字(1、2、3 等)在左边，严格对齐，文本也严格对齐(这样向上的箭头垂直对齐)，右边的图标应该去只要它在 div 中，就必须去任何地方。

代码如下:

.div-container .form-div-container .small-text,
.div-container .form-div-container .longer-text,
.div-container .form-div-container .even-longer-text,
.div-container .form-div-container .longer-longer-longer-text,
.div-container .form-div-container .small-text-two {
  display: flex;
  justify-content: space-between;
}

HTML :

<div class="div-container">
    <div class="form-div-container">
        <div class="small-text">
            <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="even-longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="longer-longer-longer-text">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
        <div class="small-text-two">
        <p></p>
            <div></div>
            <img src="" alt="" srcset="">
        </div>
    </div>
</div>

问题是图标的宽度并不完全相同，因此它们会插入中间的元素。我怎样才能按照我想要的方式做事？谢谢!

Answer 1

您可以将包含数字和图标的元素的宽度设置为固定百分比值，如下所示:

.box__icon,
.box__number {
  width: 15%;
  text-align: center;
}

请参阅下面的完整演示:

/*IGNORE STYLE RULES FROM HERE......*/

body {
  margin: 0;
}
i {
  font-style: normal;
}

.box {
  color: white;
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: bold;
  padding: 30px;
}

.box:nth-child(1) {
  background: firebrick;
}

.box:nth-child(2) {
  background: darkturquoise;
}

.box:nth-child(3) {
  background: chocolate;
}

.box:nth-child(4) {
  background: midnightblue;
}


.box__text::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent #ffffff transparent;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

/*.... TO HERE*/


.box {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.box__icon,
.box__number {
  width: 15%; /*Change this to whatever value you want*/
  text-align: center;
}

.box__text {
  color: white;
  font-family: sans-serif;
  text-align: center;
}

<div class="container">
  <div class="box">
    <div class="box__number">1</div>
    <p class="box__text">Small Text</p>
    <i class="box__icon">Icon---</i>
  </div>
  <div class="box">
    <div class="box__number">2</div>
    <p class="box__text">Longer Text</p>
    <i class="box__icon">Icon</i>
  </div>
  <div class="box">
    <div class="box__number">3</div>
    <p class="box__text">Even Longer Text</p>
    <i class="box__icon">Icon--</i>
  </div>
  <div class="box">
    <div class="box__number">4</div>
    <p class="box__text">Longer Longer Longer Text</p>
    <i class="box__icon">Icon---</i>
  </div>
</div>