css - 画像間の内側の間隔？

Question

サムネイル付きのギャラリーを作成したかったのですが、問題が発生しました。親指の間隔を空けたい場合は、のような操作を行う必要がありますがmargin-right: 15px;、これにより、最も右の画像用のスペースが作成されます。テンプレートの端にスペースを配置せずに、これらのスペースを作成するにはどうすればよいですか？

例：

ありがとう！

Answer 1

必要なのは、コンテナ要素の負のマージンです。

http://jsfiddle.net/LYhum/

.container {
    margin: -10px 0 0 -10px;
}

.container .image {
    margin: 10px 0 0 10px;
    /* either floated or set to inline-block */
}

コンテナがレスポンシブである場合（つまり、コンテナの幅がわからない場合）、flexboxは一見の価値があります。

http://jsfiddle.net/LYhum/4/（フレックスボックスをサポートしていないブラウザのフォールバックがあります）

.container {
    margin: -10px 0 0 -10px;
    display: flex;
    -moz-flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.container .image {
    margin: 10px 0 0 10px;
    background: red;
    width: 100px;
    height: 100px;
    display: inline-block;
}

Answer 2

私は<li>ここで仮定しますが、私が間違っている場合は私を訂正してください：

ul.thumbs li {
  margin-right: 15px;
}
ul.thumbs li:last-child {
  margin-right: 0;
}

:last-child疑似セレクターを使用します。（いくつかの癖を覚えておいてください）

Answer 3

それらを端から端まで等間隔にしたい場合は、いくつかの計算を行う必要があります。

ギャップがないように、希望するマージンで正方形の幅を引きます。

(width of container) - ((# of squares)*(width of squares))
divided by (# of squares - 1)) == margin required for even spacing

例えば：

コンテナの幅が300ピクセルで、正方形が30ピクセルの場合、margin-right == 37.5px（150ピクセルを4で割った値（4つのスペース））...次に、：last-childトリックのようなものを使用して最後の正方形を修正します。 。（または、最後の正方形に0マージンをハードコーディングするだけです）適切な計算を行わないと、最後の正方形の間隔は他の4つの正方形とは異なります。

| ------------------------   300px    ------------------| == the container
|square1-----square2-----square3-----square4-----square5|
|   ^     ^    ^      ^    ^      ^     ^      ^    ^
|  30   37.5   30    37.5  30   37.5   30    37.5  30   | == 300px

* not to scale :)


.square {
    width:30px;
    margin-right:37.5px;
}
#square5 {
    margin-right:0;
}

編集これはすべてコンテナの幅に依存します...ピクセルでハードコーディングされていない場合（つまり％）、同じ種類の計算を行うことをお勧めしますが、％widthと％marginを使用します代わりは。