0

Подскажите пожалуйста, как правильно сделать идентичные пробелы между 25% инлайн-блоками на одной строке?

Нашел решение с флексом {justify-content: space-between;}, но интересует именно решение для инлайн-блоков.

* {
  box-sizing: border-box;
}
body {
  display: block;
  margin: 0 auto;
}
.wrap {
  display: block;
  margin: 0 auto;
  max-width: 1000px;
  border: 1px solid;
  text-align: center;
  font-size: 0;
}
.wrap > div {
  display: inline-block;
  width: 25%;
  height: 150px;
  font-size: 100px;
  border: 1px solid;
  vertical-align: top;
}
    <div class="wrap">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>

2
  • У родителя font-size: 0; Commented 19 авг. 2018 в 18:37
  • font-size: 0; установил чтобы все 4 блока уместились на одну строку. Но вот какое правильное решение будет для установки равномерных отступов между границами блоков 1-2-3-4, чтобы границы 1-4 оставались прижаты к обертке (.wrap), не очень понимаю.
    – Vvv
    Commented 19 авг. 2018 в 18:46

1 ответ 1

1

Вам нужно самому считать эти отступы, если вы не можете опираться на flex. Для этого в css есть функция calc.

* {
  box-sizing: border-box;
}

body {
  display: block;
  margin: 0 auto;
}

.wrap {
  display: block;
  margin: 0 auto;
  max-width: 1000px;
  border: 1px solid;
  text-align: center;
  font-size: 0;
}

:root {
  --marginSize: 20px;
}

.wrap > div {
  display: inline-block;
  width: calc(25% - var(--marginSize) * 3 / 4);
  height: 150px;
  font-size: 100px;
  border: 1px solid;
  vertical-align: top;
}

.wrap > div:not(:last-child) {
  margin-right: var(--marginSize);
}
<div class="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

1
  • Спасибо вам, Андрей! Изучу эту функцию.
    – Vvv
    Commented 19 авг. 2018 в 18:51

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.