Question

我在div中使用列表项显示了一些图像。使用简单的CSS float：left技巧，我可以获得以下布局： current

但是我是他们根据div的宽度和高度进行动态排列，想要这样的东西： wished

如果有任何方法可以使用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 for masonry part：

$（ '＃容器'）。砌体（{ “阴沟”：10， itemSelector：'。myimage' }）;

enter image description here

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

Answer 1

您可以使用CSS3属性calc。

HTML：

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

的CSS：

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

所有主流网络浏览器，桌面和移动设备均支持此功能。当然，您不会在旧浏览器中获得支持，但它在响应/流畅布局中非常有用。我经常使用它。

编辑：忘记提及，遗憾的是，它无法在默认的Android浏览器上运行，但这并没有阻止我将其用于我的网站的桌面版本。

Answer 2

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

Answer 3

您可以使用display:table

对容器进行居中

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

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

3 个答案: