CSS-イメージのリストを並べて配置することができません

Question

私は並置される必要があるCSSイメージのリストを持っています。これにより、2つの隣接するイメージが共通の境界を共有する必要があることを意味します。ですから、20枚の画像がある場合は、画面サイズに応じて4枚ずつ並べて重ねていきたいと思います。現在、イメージの間に空白がありますが、私ははっきりとしたくありません。私は何をしているのかを示すためにJS-Fiddleを付けました。

親切に画像間のスペースを削除するには

CSS

.photo-grid { 

    margin: 1em auto; 

    max-width: 300%; 

    text-align: center; 

} 



.photo-grid li { 



    display: inline-block; 

    margin: 1em; 

    width: 125px; 

} 



.photo-grid img { 

    display: block; 

    height: auto; 

    max-width: 100%; 

} 



.photo-grid figure { 

    height: 125px; 

    overflow: hidden; 

    position: relative; 

    width: 125px; 

} 



.photo-grid figcaption { 

    background: rgba(0,0,0,0.8); 

    color: white; 

    display: table; 

    height: 100%; 

    left: 0; 

    opacity: 0; 

    position: absolute; 

    right: 0; 

    top: 0; 

    z-index: 100; 

} 



.photo-grid figcaption p { 

    display: table-cell; 

    font-size: 1.5em; 

    position: relative; 

    top: -40px; 

    width: 289px; 

    vertical-align: middle; 

} 


.photo-grid li:hover figcaption { 

    opacity: 1; 

} 

JS Fiddle

Answer 1

を助け、最も簡単な方法は、要素間のHTML内の任意の空白を削除するには、おそらくです。あなたの画像はinline-blockに設定されています。つまり、要素間の空白は他のインライン要素のように（spanまたはaなど）保存されます。

もう1つの方法は、コンテナにfont-size: 0を設定することです。これにより、要素の間のスペースがディスプレイから削除されます（0）。

もう1つの方法は、画像をブロックレベルの要素にして（空白が保存されないように）、それらを互いに隣に積み重ねることです。

img { 
 
    max-width: 200px; 
 
    height: auto; 
 
} 
 

 
.font-zero { 
 
    font-size: 0; 
 
} 
 

 
.float { 
 
    overflow: auto; 
 
} 
 
.float img { 
 
    float: left; 
 
}

<img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"><img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"><img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"> 
 

 
<div class="font-zero"> 
 
    <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"> 
 
    <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"> 
 
    <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"> 
 
</div> 
 

 
<div class="float"> 
 
    <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"> 
 
    <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"> 
 
    <img src="http://static4.businessinsider.com/image/56c640526e97c625048b822a-480/donald-trump.jpg"> 
 
</div>

Answer 2

あなたの余白を修正。画像間に望ましくない空白がある場合は、1emの余白が原因です。必要に応じて上下のマージンを入れてください。ただし、周りに余白を入れないでください。

Answer 3

まず、25％の幅のクラスグループを作成する必要があります - >col25。 次に、小さなデバイス用のイメージごとに3つのクラスを作成します。 - >.scol25、 、中デバイスの場合は.mcol25、大きいデバイスの場合は.lcol25です。

イメージ間のマージンを取り除いて、ボックスのサイズを変更するボックスを作成します。最後に

.scol25, .mcol25, .lcol25 { 
    box-sizing:border-box; 
    margin-right:-3px; 
    margin-top:-4px; 
    text-align:center; 
    padding:0px; 
} 

ます（行ごとに一つの画像である携帯電話を除く）は、4枚の画像の4行を表示常にできるように、各画面サイズに幅と高さを設定します。

<div id="photo-grid"> 
<img id="img-1" class="photo" alt="alt-of-img"/> 
... 
<img id="img-16" class="photo" alt="alt-of-img"/> 
</div> 

いけないあなたは何の空白を持たないように<img>タグの間の空白を削除するのを忘れ。

PS。 margin-top:-4px私はそれがオンラインコンパイラではうまくいかないので追加したので、あなたのページに追加するときにコマンドを削除することができます。

希望します。

リンク：jsfiddle.netリンクdoesntのは、あなたのコードを表示

場合は教えてください。