html - 6 正方形图像占 500px 的 100% 并保持相同大小

Question

很难命名这个问题，甚至只是试图解释我在寻找什么，所以我创建了一个 jsfille here你可以看看。

我的 HTML:

<div class="container">
  <div class="full-width"></div>
  <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
  <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
  <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
  <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
  <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
  <img class="photo"src="http://static.squarespace.com/static/52a131d3e4b0aec740d0eadf/5310dce6e4b0f37a89519ed4/5310e278e4b0f37a8951e472/1393615480087/4insta.png?format=original" />
</div>

我的 CSS:

.container {
  width: 500px;
}
.full-width {
  background: blue;
  width: 500px;
  height:100px;  
}
.photo {
  display: block;
  float: left;
  width: 16%; // 100% divided by 6
}

所以我有 6 个方形图像需要在 500px 宽度的容器中排成一行。此宽度无法修改。所以，我将每个图像的宽度设为 16%(100% 除以 6)。但现在最终发生的是它并没有填满整个容器。与确实填满整个元素的元素相比，这是非常清楚的。对齐完全结束。

我怎样才能做到这一点？

编辑

使用 width: 16.6%; 已经很接近了，但它仍然没有完全填满容器。

Answer 1

您可以使用 calc()功能来实现您的目标。

.photo {
  display: block;
  float: left;
  width: calc(500px / 6);
}

或者设置为16.66666666666666666666666666667%