0

画像を表示する要素があります。この要素は、画像の数に応じて水平方向に成長する必要があります。何枚の画像があるかは事前にわかりません。

私の問題は、画像が少ないときに要素が広すぎることです。画像の周りに十分に密着していません。

http://jsfiddle.net/sXgzn/ (最初の例は機能しますが、2 番目の例は機能しません。)

<div class = "outer">
  <img src = "xx" class = "inner" />
  <img src = "xx" class = "inner" />
  <img src = "xx" class = "inner" />
</div>
4

3 に答える 3

2

display:inline-blockコンテナーに追加して収まるように縮小し、次に追加font-size:0して周囲の空白を折りたたむ:サンプル フィドル

于 2013-08-20T20:34:18.190 に答える
1

外側の div にdisplay:inline-blockまたはを設定します。float:left

フロートjsFiddle の例

インラインブロックjsFiddle の例

それらを絶対に配置するとシュリンク ラップも行われますが、通常は追加の位置ルール (上、左など) が必要です。

于 2013-08-20T20:35:22.927 に答える
0

display: inline-block;外側要素と内側要素の両方で使用します。最大幅を強制する必要がありますか?

HTML

<div class="outer">
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
  <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" class="inner" />
</div>

CSS

.outer{
  background: black;
  display: inline-block;
  padding: 10px 10px 5px 10px;
}
.inner {
  background: yellow;
  display: inline-block;
  width: 50px;
}

フィドルフォーク。

于 2013-08-20T20:38:43.007 に答える