css - 如何平均分配填充

Question

我有三个并排的图像..相等的宽度..
如何百分比 padding-left 属性以适应多个设备？
按填充左侧的百分比，我不希望图像在自己旁边..希望将它们均匀地分布在可用的屏幕宽度中

img { padding-left: some% } 

考虑到图像的宽度相等.. 如果 padding-left 太多，它会使用某些设备将第三张图像推到下一行

Answer 1

这个纯 CSS2 解决方案可以完成这项工作：

标记：

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

样式表（提供的图像，例如 100px 宽）：

#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) { }

这只会针对最大宽度为 480 像素的屏幕

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;
}