1

コンテナーの垂直方向の長さが 375px を超えると、最初の行の横に画像が自動的に追加されるように css を構成するにはどうすればよいですか?

下の私のデモを見てください

HTML

<div class="panes">

<div id="one">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>

<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>

<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>

</div>

CSS

.panes {
max-width:375px?
}
4

2 に答える 2

1

まず、垂直方向の長さはheight、 ではなく、属性によって指定されますwidth。

次に、必要なことを行うには JavaScript が必要です。配置したい場所に画像を挿入し、属性を作成しますvisibility = "hidden";。

次に、読み込み時、または問題に適したイベントで JavaScript 関数を使用して、この関数が画像の可視性を にリセットするようにしvisibility = "visible"ます。

単純に可視性を変更するのではなく、javascript 関数を使用して要素を挿入することができます。

于 2012-12-27T20:58:37.753 に答える
1

float: left;

http://jsfiddle.net/LTtEN/

Here you go:

<div class="panes">
<div class="test">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>
</div>

<div class="test">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>
</div>

<div class="test">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>
</div>

<div class="test">
<a href="#"><img src=".jpg" width=100 height=100 /></a>
<div>Caption</div>
</div>

CSS:

.panes {width:375px}
.test {float: left; width: 100px; padding: 6px;}
于 2012-12-27T20:58:18.593 に答える