css：auto center inner elements（with automargin）

Question

我有这样的代码：

<div class="first">
  <img class="inner n1">
  <img class="inner n2">
  <img class="inner n3">
</div>

所以它看起来像：

我可以自动拉伸边距：

这样第一个元素总是在左边，第二个+ n总是在中心，最后一个在右边？ （可能有2个...... 10个元素，而不仅仅是3个）

https://jsfiddle.net/9bbxL8w8/

Answer 1

你可以使用flex-box来做到这一点。

.first{
  width: 500px;
  height: 100px;
  background: red;
  display: flex;
  justify-content: space-between;
}

https://jsfiddle.net/9bbxL8w8/1/

虽然要小心支持的浏览器。 http://caniuse.com/#feat=flexbox

Answer 2

您可以使用display:flex和justify-content: space-between

.first{
  width: 500px;
  height: 100px;
  background: red;
  justify-content: space-between;
  display:flex;
}

.inner{
  height: 40px;
  background: yellow;
}

.inner.n1{
  width: 40px;
}

.inner.n2{
  width: 60px;
}

.inner.n3{
  width: 30px;
}

<div class="first">
  <img class="inner n1">
  <img class="inner n2">
  <img class="inner n3">
</div>

希望它会对你有所帮助。