html - CSS - 如何并排放置 div，左右没有空格

Question

我有一个带有多个子 div 的父 div，我想让子 div 每行并排 float 4 个。

float 规则必须:

1. 每个 child div 相同的宽度。
2. 每行 4 个子 div。
3. 每一行左右两边必须用wrapper(0px/无空格)闭合，如下图。
4. 每个子 div 之间的每一行必须有一个空格，并且大小必须相同，如下图所示。

通过使用 css/css3 可以做到吗？对不起我的英语不好。

Answer 1

使用 CSS3 这相对容易:使用 box-sizing: border-box;，子 div 的宽度将包括填充(例如 20px)和边框, 并且可以设置为主体宽度的 25%。给父 div(包装器)一个负的右边距以隐藏最右边的空间。由于这个额外的空间，一个滚动条将出现在主体上，可以使用 overflow-x: hidden; 隐藏它。

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.wrapper {
  margin-right: -20px;
}
.child {
  box-sizing: border-box;
  width: 25%;
  padding-right: 20px;
  float: left;
}
.child p {
  background: lime;   
}

<p>Content</p>
<div class="wrapper">
  <div class="child"><p>Child</p></div>
  <div class="child"><p>Child</p></div>
  <div class="child"><p>Child</p></div>
  <div class="child"><p>Child</p></div>
</div>
<p>Content</p>