javascript - 如何让图片单独放置

Question

如何让这个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>

Answer 1

我不完全确定我理解这个问题。但我感觉你会想要研究 jQuery Masonry 插件：

http://masonry.desandro.com/

它允许您以流畅的布局布置图像（和其他元素）。

Answer 2

添加样式：

<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>