html - 显示 flex 的回退

Question

我怎样才能为我的方框提供相同的间距，而不是将它们全部放在一起，右边有这么多空间？

我通常使用 display flex 因为它很容易做到这一点，但由于并非所有浏览器都支持 flex 属性，我正在尝试另一种方法。

下面是我的代码，希望对你有所帮助。

.main > div{
  float: left;
  height: 100px;
  width: 200px;
}
.yellow{
  background: yellow;
}
.red{
  background: red;
}
.green{
  background: green;
}
.black{
  background: black;
}

<div class="main">
  <div class="red">
    
  </div>
  <div class="green">
    
  </div>
  
  <div class="yellow">
    
  </div>
  
  <div class="black">
    
  </div>
</div>

Answer 1

你可以试试这个

.main {
  text-align: justify;
}

.main:after {
  content: '';
  display: inline-block;
  width: 100%;
}

div>div {
  display: inline-block;
  /* height, width and border for demo purpose only */
  height: 50px;
  width: 100px;
  border: thin solid darkgray;
}


/* for browsers that support flex */

@supports (display:flex) {
  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .main:after {
    display: none;
  }
}

<div class="main">
  <div class="red"></div>
  <div class="green"></div>
  <div class="yellow"></div>
  <div class="black"></div>
</div>