我在div中使用列表项显示了一些图像。通过简单的CSS float：left技巧，我可以得到以下布局：
但是我是他们根据div的宽度和高度动态排列，并想要这样的东西：
让我知道是否可以使用CSS，JavaScript或jQuery实现相同的目的。
另外，请告诉我这些示例屏幕快照是否无济于事，并且需要HTML代码。
谢谢
编辑：应用砌体插件后添加图像（请参见下面的图像3）。现在，我有相等数量的图像，并且它们之间的间距相等且具有适当的装订线。但是它总是向左对齐。如何始终将它们居中对齐？
我有以下代码：
<div id="container">
<img src="" class="myimage">
<img src="" class="myimage">
<img src="" class="myimage">
<img src="" class="myimage">
</div>
和jQuery的砌体部分：
$（'＃container'）。masonry（{
“装订线”：10，
itemSelector：“。myimage”
}）;
编辑2：还做了一个jsfiddle，以显示应用砌体插件后的正确边距问题。请同时调整浏览器的大小以查看每种情况的正确间隙：http://jsfiddle.net/5KyRd/7/
最佳答案
这是媒体查询解决方案：http://jsfiddle.net/B45qv/
首先，将图像设置为max-width: 100%，以使其具有灵活性。
从那里，您需要确定每行要多少张图像并将其宽度设置为百分比。只需将100除以每行的数量即可（100/7 = 14.285714％）。此宽度应包括所有填充和边距，因为它们会增加图像的尺寸。
对于所有侧面的1％的边距，上图的宽度为12.285714％，1 + 12.285714% + 1 = 14.285714%。
除此之外，您只需要确定将调整每行编号的屏幕尺寸即可。我的示例具有任意值。
的HTML
<body>
<div class="clearfix">
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
<img src="http://lorempixel.com/125/50/" alt="temp" />
</div>
</body>
的CSS
body {
margin: 0;
background-color: red;
}
div {
width: 86%;
margin: 25px auto;
padding: 15px 25px;
background-color: white;
border: 1px solid white;
border-radius: 8px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
div img {
float: left;
max-width: 100%;
width: 12.285714%; /* 7 per row */
margin: 1%;
}
@media screen and (max-width: 799px) {
/* 6 per row */
div img {
width: 14.66666%;
}
}
@media screen and (max-width: 699px) {
/* 5 per row */
div img {
width: 18%;
}
}
@media screen and (max-width: 599px) {
/* 4 per row */
div img {
width: 23%;
}
}
@media screen and (max-width: 499px) {
/* 3 per row */
div img {
width: 31.33333%;
}
}
@media screen and (max-width: 399px) {
/* 2 per row */
div img {
width: 48%;
}
}