Как настроить пробелы между элементами в макете inline-блока?

Я пытаюсь создать макет без использования сетки или flexbox, я использую display: inline-block для достижения этой цели, но у меня есть проблема с настройкой пробелов.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  text-align : justify;
}

.wrapper > div {
  display: block;
  margin-top: 5px;
}

.header {
  background: lightgreen;
  margin-top: 0;
}

.footer {
  background: #eee;
}

.main > div {
  display: inline-block;
  width: 49%;
  height: 20vh;
  background: #eee;
}
<div class="wrapper">
    <div class="header">header</div>
    <div class="main">
       <div class="item">item1</div>
       <div class="item">item2</div>
       <div class="item">item3</div>
       <div class="item">item4</div>
    </div>
    <div class="footer">footer</div>
 </div>

enter image description here

Я пытаюсь добиться того же эффекта, что и [113 ] во flexbox, но у меня есть элементы, которые плохо выровнены в макете.

Я могу исправить пробелы вокруг item4, но используя margin-left, но мне не нравится это решение.

1
задан Code Eagle 17 March 2019 в 19:39
поделиться

2 ответа

Добавьте скрытый элемент, чтобы вызвать выравнивание justify для последней строки, но вам нужно будет использовать отрицательный margin-bottom, чтобы удалить добавленную дополнительную строку.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  text-align : justify;
}

.wrapper > div {
  display: block;
  margin-top: 5px;
}

.header {
  background: lightgreen;
  margin-top: 0;
}

.footer {
  background: #eee;
}

.main > div {
  display: inline-block;
  width: 49%;
  height: 20vh;
  background: #eee;
}
.main:after {
  content:"";
  display:inline-block;
  width:5%;
  height:50px; /* we consider a bigger value than the line-height*/
}
.main {
  margin-bottom:-50px; /*the same value defined in the pseuo element*/
}
<div class="wrapper">
    <div class="header">header</div>
    <div class="main">
       <div class="item">item1</div>
       <div class="item">item2</div>
       <div class="item">item3</div>
       <div class="item">item4</div>
    </div>
    <div class="footer">footer</div>
 </div>

Или используйте трюк font-size:0, чтобы избежать этой лишней строки:

[1116 ]
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  text-align : justify;
}

.wrapper > div {
  display: block;
  margin-top: 5px;
}

.header {
  background: lightgreen;
  margin-top: 0;
}

.footer {
  background: #eee;
}

.main > div {
  display: inline-block;
  width: 49%;
  height: 20vh;
  background: #eee;
  font-size:initial;
}
.main:after {
  content:"";
  display:inline-block;
  width:5%;
}
.main {
  font-size:0;
}
<div class="wrapper">
    <div class="header">header</div>
    <div class="main">
       <div class="item">item1</div>
       <div class="item">item2</div>
       <div class="item">item3</div>
       <div class="item">item4</div>
    </div>
    <div class="footer">footer</div>
 </div>

0
ответ дан Temani Afif 17 March 2019 в 19:39
поделиться

Я не думаю, что вы можете достичь этого, не устанавливая интервал. Как вы, вероятно, знаете, вы можете лучше контролировать макеты встроенных блоков, устанавливая отрицательный межбуквенный интервал в контейнере и сбрасывая элемент: .main {letter-spacing: -4px} .item {letter-spacing: 0} (вам нужно проверить, работает ли 4px).

Или (поскольку мы не используем flex :), вы можете плавать нечетные и четные деления влево и вправо: .item:nth-child(odd) {clear: left; float: left} .item:nth-child(even) {float: right}

0
ответ дан Kjetil Hansen 17 March 2019 в 19:39
поделиться
Другие вопросы по тегам:

Похожие вопросы: