保持Div之间的空间/填充

Question

如何在不计算空格的情况下保持内联div元素之间的空间为＆＃39;像素＆＃39;？

例如，目前我正在使用margin-right（作为我的元素之间的填充）但最终将其视为像素（结果显示丑陋，请参阅JsFiddle，div元素被推下）。

#parent .child
{
    position: relative;
    display: inline-block;
    height: 100%;
    width: 16.5%;
    background-color: green;
    margin-right: 15px;
}

JsFiddle

基本上，我只想让第一个项目向左浮动，最后一个项目向右浮动。现在我知道你们很多人在想，为什么不只是使用这个功能＆＃39;证明＆＃39;？我尝试过使用它，但它并不是一个非常好的选择，因为元素的数量可以是一切（10,5,8等）。

帮助会被暗示！

编辑：这基本上是我想要实现的功能，但对于多个元素（而不是只有1行，可能有2-16行。

Answer 1

您可以使用text-align: justify。它不能证明最后一行的合理性，但你可以强制一个带有伪元素的新行：

＆＃13;

＆＃13;

#parent {
  text-align: justify;
  background-color: red;
}
#parent:after {
  content: '';
  display: inline-block;
  width: 100%;
}
#parent .child {
  display: inline-block;
  height: 100px;
  width: 16.5%;
  background-color: green;
  margin-right: 15px;
  margin-bottom: 10px;
}

＆＃13;

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我理解正确，您希望在子项之间设置内部边距，而不是在边缘子项和父项之间设置内部边距。像

这样的东西

.child { margin-right: 15px; }
.child:last-of-line { margin-right: 0; }

目前无法做到这一点，但您可以添加一个带有负边距的附加包装器：

#inner-wrapper {
  margin-right: -15px;
  margin-bottom: -10px;
}
.child {
  margin-right: 15px;
  margin-bottom: 10px;
}

＆＃13;

＆＃13;

#parent {
  background-color: red;
  overflow: hidden;
}
#inner-wrapper {
  margin-right: -15px;
  margin-bottom: -10px;
}
.child {
  vertical-align: top;
  display: inline-block;
  height: 210px;
  width: 16.5%;
  background-color: green;
  margin-right: 15px;
  margin-bottom: 10px;
}

＆＃13;

<div id="parent">
  <div id="inner-wrapper">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;