1

我在 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({ "gutter": 10, itemSelector: '.myimage' });

在此处输入图像描述

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

4

3 回答 3

1

您可以使用 CSS3 属性计算。

html:

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

CSS：

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

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

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

于 2013-07-14T08:48:59.110 回答
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%;
    }
}
于 2013-07-15T02:28:12.687 回答
0

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

#container {
    display: table;
    margin: 0 auto;
}
于 2013-07-14T09:45:26.637 回答