html - 等间距 CSS

Question

我对 float 框的边距有疑问。

这是 Html 和 CSS 代码。

JSFiddle

* {
  margin: 0;
  height: 0;
}
#main {
  width: 50%;
  background: red;
  height: 200px;
}
.box {
  background: orange;
  float: left;
  width: 19%;
  height: 100px;
  margin: 0 1% 0 0;
}

<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

在这段代码中，我实际上希望这 5 个盒子具有相等的间距，最后一个和第一个盒子应该接触容器的边缘。问题是，我无法完成这项任务。当我尝试设置相等的边距值时，间距变得相等但最后一个框不接触容器。当我增加边距值时，框会出现在下一行。

Answer 1

您可以使用 flexbox 解决您的问题.

将 display: flex; 和 justify-content: space-between; 分配给你的 #main div，然后删除你设置的边距用于您的 .box div。

CSS

#main{
  display: flex;
  justify-content: space-between;
}

.box{
  margin:0 1% 0 0;  /* <-- Remove This */
}

JSFiddle

*
{
margin:0;
height:0;
}

#main{
width:50%;
background:red;
height:200px;
display: flex;
justify-content: space-between;
}

.box{
background:orange;
float:left;
width:19%;
height:100px;
}

<div id="main">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>