html - 如何调整内联 block 布局中元素之间的空间？

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 相同的效果 但是我得到的元素在布局中没有很好地对齐。

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

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>