css - パディングを均等に分散する方法

Question

3つの画像を並べて表示します。同じ幅です。
複数のデバイスに合わせてpadding-leftプロパティをパーセンテージで表示するにはどうすればよいですか。
パディング左のパーセンテージで、私は画像が自分のすぐ横にあることを望まない..利用可能な画面幅に均等にそれらを分配したい

img { padding-left: some% } 

画像の幅が等しいことを考慮します。左のパディングが大きすぎる場合は、一部のデバイスで3番目の画像を次の行にプッシュします。

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でメディアクエリを使用して特定の画面幅をターゲットにし、次にパディング左％を使用してさまざまな画面を補正できます。

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