Как выровнять предметы на основе 2 других предметов? - PullRequest
Новая
       16

Как выровнять предметы на основе 2 других предметов?

0 голосов
/ 05 ноября 2018

Я пытаюсь выровнять 3 элемента во Flexbox. Чтобы сделать вещи проще, вот текущий макет Here's what I have now

Цель здесь - сохранить цифры (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>

Дело в том, что значки не все одинаковой ширины, поэтому они выдвигают средний элемент. Как я могу делать вещи так, как я хочу? Спасибо!

1 Ответ

0 голосов
/ 05 ноября 2018

Вы можете установить ширину элементов, содержащих цифры и значки, в фиксированное процентное значение, как показано ниже: 

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