0

この img を単独で配置するにはどうすればよいですか? すべての画像の幅= 300、3画像/行ですが、高さはランダムです..2行目以降の行を前の行の一番下に配置するにはどうすればよいですか?

    <section id="contenedor">
    <div id="imagen"><img src="x" class="ancho" />300</div>
    <div id="imagen"><img src="x" class="ancho" />300</div>
    <div id="imagen"><img src="x" class="ancho" />300</div>
    <div id="imagen"><img src="x" class="ancho" />300</div>
    <div id="imagen"><img src="x" class="ancho" />300</div>
    <div id="imagen"><img src="x" class="ancho" />300</div>
    <div id="imagen"><img src="x" class="ancho" />300</div>
    <div id="imagen"><img src="x" class="ancho" />300</div>
    <div id="imagen"><img src="x" class="ancho" />300</div>
</section>
4

2 に答える 2

0

スタイルを追加します。

<style>
#imagen{
    width: 320px;
    float: left;
}
#imagen img{
    width: 300px;
    margin: 0px auto;
}

.split{
    clear: left;
}
</style>

<div class="split"></div>3枚ごとに画像を追加します。と同じように：

<section id="contenedor">
    <div id="imagen"><img src="200.jpg" class="ancho" />300</div>
    <div id="imagen"><img src="300.jpg" class="ancho" />300</div>
    <div id="imagen"><img src="400.jpg" class="ancho" />300</div>
    <div class="split"></div>
    <div id="imagen"><img src="300.jpg" class="ancho" />300</div>
    <div id="imagen"><img src="400.jpg" class="ancho" />300</div>
    <div id="imagen"><img src="200.jpg" class="ancho" />300</div>
    <div class="split"></div>
    <div id="imagen"><img src="400.jpg" class="ancho" />300</div>
    <div id="imagen"><img src="300.jpg" class="ancho" />300</div>
    <div id="imagen"><img src="300.jpg" class="ancho" />300</div>
</section>
于 2012-07-05T10:12:58.937 に答える
0

質問を理解しているかどうか完全にはわかりません。しかし、あなたは jQuery Masonry プラグインを調査したいと思うでしょう。

http://masonry.desandro.com/

流動的なレイアウトで画像 (およびその他の要素) をレイアウトできます。

于 2012-07-05T10:07:55.903 に答える