如何在DIV中动态移动列表项以获得正确的排列？
我使用div中的列表项显示了一些图像。使用简单的CSS float:left技巧，我可以得到以下布局：
但我是他们根据div的宽度和高度动态排列的，我想要这样的东西：
如果有任何方法可以使用CSS、JavaScript或jQuery实现同样的效果，请让我知道。
另外，让我知道如果这些样本截图没有帮助和HTML代码是必要的。
谢谢
编辑:在应用masonry插件后添加图像(见下图3)。现在我有了相同数量的图像，它们的间距是相等的，并且有适当的间隔。但是它总是左对齐的。怎么才能始终居中对齐呢？
我有以下代码：
<div id="container">
<img src="" class="myimage">
<img src="" class="myimage">
<img src="" class="myimage">
<img src="" class="myimage">
</div>和jQuery用于石工部分：
$('#container').masonry({“.myimage”：10，itemSelector：'.myimage‘})；
编辑2:还制作了一个jsfiddle，以显示应用masonry插件后右边距的问题。请同时调整浏览器大小以查看每种情况下的右侧间隙：http://jsfiddle.net/5KyRd/7/
回答 3
Stack Overflow用户
发布于 2013-07-15 02:28:13
这是一个媒体查询解决方案：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%;
}
}Stack Overflow用户
发布于 2013-07-14 08:48:59
可以使用CSS3特性计算器。
html：
<div id="container">
<img src="">
<img src="">
<img src="">
<img src="">
</div>css：
#container{
width:600px;
}
img{
width:calc(600px / 4);
}它在所有主要的web浏览器中都得到了支持，无论是桌面浏览器还是移动浏览器。当然，你不会在老的浏览器中获得支持，但它在响应式/流畅的布局中非常有用。我经常用它。
编辑:忘了提一下，不幸的是，它不能在默认的Android浏览器上工作，但这并没有阻止我在我的网站的桌面版本上使用它。
Stack Overflow用户
发布于 2013-07-14 09:45:27
您可以使用display:table将容器居中
#container {
display: table;
margin: 0 auto;
}https://stackoverflow.com/questions/17633766
复制
相似问题
在div中以图标形式并排列表项(css)
在移动列表项中显示多个div列
需要div排列，如截图所示
以特定模式排列列表项
Div没有正确排列
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
