0

いくつかの調査の後、このエレガントな方法を見つけました。

#container {
  text-align: justify;
  background-color: #FF0000;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "";
  width: 100%;
  display: inline-block;
}

<div id="container">
  <img src="http://placehold.it/150x100" />
  <img src="http://placehold.it/100x150" />
  <img src="http://placehold.it/250x50" />
  <img src="http://placehold.it/150x150" />
</div>

ここで結果を参照してください: http://codepen.io/naio/pen/vbgrm

右側のわずかな余白はなぜですか。画像の下に追加された空白を取り除くにはどうすればよいですか?

4

3 に答える 3

0

この空白とパディングの問題がない別のアプローチは次のとおりです。 http://jsfiddle.net/eNKhy/3/

#container {  
     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    vertical-align: bottom;
}
#container, #container img, .stretch{
    line-height:0;
}

<span class="stretch"></span>divの最後に追加します

于 2013-11-13T12:09:52.347 に答える