如何在 DIV 中动态移动列表项以获得正确的排列？答案

【问题标题】：how to dynamically move list items inside a DIV to get proper arrangement?如何在 DIV 中动态移动列表项以获得正确的排列？
【发布时间】：2013-07-12 02:36:54
【问题描述】：

我在 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，项目选择器：'.myimage' });

编辑 2：还制作了一个 jsfiddle 以在应用砌体插件后显示右边距的问题。请调整浏览器大小以查看每种情况下的正确间隙：http://jsfiddle.net/5KyRd/7/

【问题讨论】：

只是让框变宽？
masonry.desandro.com 可能会有所帮助。你不会单独使用 HTML 或 CSS（至少据我所知）。
您在寻找这样的东西吗？ sapegin.github.io/jquery.mosaicflow
您是否尝试用 div 具有预定义宽度和高度的图像填充 div evenly？所有图像是否都有固定的宽度和高度，因此它们永远不会改变？
您使用的是哪种后端语言（如果有）？即 PHP、ASP、Ruby

标签： html css jquery-masonry

【解决方案1】：

这是一个媒体查询解决方案：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%;
    }
}

【讨论】：

【解决方案2】：

您可以使用 CSS3 属性计算。

html:

<div id="container">
    <img src="">
    <img src="">
    <img src="">
    <img src="">
</div>

css:

#container{
    width:600px;
}
img{
    width:calc(600px / 4);
}

所有主要的网络浏览器、桌面和移动设备都支持它。当然，您不会在较旧的浏览器中获得支持，但它在响应式/流体布局中非常有用。我经常使用它。

编辑：忘了提一下，不幸的是，它不适用于默认的 Android 浏览器，但这并没有阻止我将它用于我的网站的桌面版本。

【讨论】：

谢谢，但你怎么知道流体布局中 div 的宽度。而当宽度减小时，我们需要一种方法来找出一行可以推送多少张图片，然后找到它的宽度。
div的宽度，width:100%；然后计算（100% / 4）；如果您希望它们在某个点之后移动到 3 列，您可以使用媒体查询来实现。对不起，如果我误解了你的问题。我可以完全离开。

【解决方案3】：

您可以使用 display:table 使容器居中

#container {
    display: table;
    margin: 0 auto;
}

【讨论】：

谢谢，但这没有任何区别。
这是在没有给定宽度的情况下将 div 居中的方法，例如用于流畅的布局。如果它没有使您的 div 居中，那么手头还有另一个问题 DEMO jsfiddle.net/kevinPHPkevin/5KyRd
我已经用我的代码更新了你的演示。应用masonry插件后可以看到有右边距。请调整浏览器大小以查看每种情况下的正确间隙：jsfiddle.net/5KyRd/7