如何调整内联块布局中元素之间的间距？

Question

我试图在不使用网格或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>

我正在尝试实现与flexbox中的justify-content: space-between相同的效果 但是我的元素在布局中排列不正确。

我可以使用margin-left来修复item4周围的空间，但是我不喜欢这种解决方案。

Answer 1

添加一个隐藏元素以触发最后一行的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技巧来避免多余的一行：

* {
  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>

Answer 2

我认为不设置间隔就无法实现。如您所知，您可以更好地控制内联块布局，在容器上设置负的字母间距并在项目上进行重置：.main {letter-spacing: -4px} .item {letter-spacing: 0}（您需要测试4px是否有效）。

或者（因为我们没有使用flex :），所以您可以左右浮动div甚至是div：.item:nth-child(odd) {clear: left; float: left} .item:nth-child(even) {float: right}