如何在中间平均分配填充

Question

我有三张并排的图像..宽度相等..
如何将padding-left属性的百分比与多个设备相匹配？
通过padding-lefts的百分比，我不希望图像正好在它们旁边..想要在可用的屏幕宽度中均匀分布它们

img { padding-left: some% } 

考虑图像的宽度相等..如果左边的填充量太大，它会将第三张图像推到下一行，并带有一些设备

Answer 1

This pure CSS2 solution完成工作：

标记：

<div id="images">
  <div>
    <img src="" alt="" /><img src="" alt="" /><img src="" alt="" />
  </div>
</div>

样式表（提供images e.g. 100px wide）：

#images {
  overflow: hidden;
}
#images div {
  position: relative;
  margin: 0 -50px;
  font-size: 0;
}
#images img {
  position: relative;
  left: 25%;
  margin-left: -50px;
}
#images img + img {
  position: absolute;
  left: 50%;
}
#images img + img + img {
  left: 75%;
}

说明：

Answer 2

您可以在CSS中使用媒体查询来定位特定的屏幕宽度，然后使用padding-left％来补偿不同的屏幕，例如

@media only screen and (max-device-width: 480px) { }

这只会定位最大宽度为480px

的屏幕

Answer 3

不需要额外的标记，Flexbox将完成您需要的操作和它会自动灵活。缺点是它尚未得到广泛支持。

http://jsfiddle.net/hv3Gk/（不包括前缀，请尝试Opera）

div.container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-flow: row wrap; /* or nowrap if you know its guaranteed to fit no matter what */
}

div.container img {
  flex: 0 0 100px;
  width: 100px;
  min-height: 100px;
  background: red;
}

否则，您可以使用display: table属性，但需要额外的标记。它适用于IE8 +以及过去5年发布的任何其他浏览器版本。

http://jsfiddle.net/hv3Gk/1/

div.container {
  display: table;
  width: 100%;
}

div.container div {
  display: table-cell;
}

div.container div:first-child + div {
  text-align: center;
}

div.container div:last-child {
  text-align: right;
}

div.container img {
  width: 100px;
  min-height: 100px;
  background: red;
}