Question

如何为我所拥有的盒子提供相同的间距，而不是将它们全部放在右边那么大的空间？

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

以下是我的代码，希望你能提供帮助。

＆＃13;

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

＆＃13;

ENTRYPOINT ["$PATH_TO_BIN"]

＆＃13;

Answer 1

你可以试试这个

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

如果您知道有多少块，可以使用百分比：

.main > div {
  width: 25%;
}

否则你可以使用表格：

<table style="width:100%">
  <tr>
    <td style="background:red;"></td>
    <td style="background:green;"></td>
    <td style="background:black;"></td>
    <td style="background:blue;"></td>
  </tr>
</table>

显示flex的后退

2 个答案: