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>

并每3张图片添加<div class="split"></div>。就像：

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

如何让照片单独放置

2 个答案: