0

我试图显示两行六列，并在浏览器窗口缩小时让它们缩小。原始css根据图像大小显示列数，每个图像向左浮动，因此对于不同的屏幕尺寸，我最终会出现大空间。

.ngg-albumoverview {
    overflow: hidden;
    margin-top: 1px;
        margin-left: 0px;
    width: 100%;
    clear:both;
    display:block !important;
}

.ngg-album {
    float:left;
    height: 100%;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #fff;

}

/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
    overflow:hidden;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #cccccc;
}

.ngg-album {
    overflow: hidden;
    padding: 0px;
    margin-bottom: 0px;
    border: 0px solid #cccccc;

}

.ngg-albumtitle {
    text-align: left;
    font-weight: bold;
    margin:0px;
    padding:0px;
    font-size: 1.4em;
    margin-bottom: 0px;
}


.ngg-thumbnail {
    float: left;
    margin-bottom: 10px;
    margin-right: 2px;
    text-align: center;
    font-weight:bold;
background-color:#0F0F0F;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px
}


.ngg-thumbnail img {
    background-color:#A9A9A9;
    border:0px solid #1D1D1D;
    display:block;
    margin:4px 0px 4px 5px;
    padding:4px;
    position:relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:200px;
}

.more {
    width: 100%;
    background-color:#0F0F0F;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px
}



.ngg-thumbnail:hover {
    background-color: #333333;
}

.ngg-thumbnail img:hover {
    background-color: #FFFFFF;
}

.more:hover {
    background-color: #333333;
}

.ngg-description {
    text-align: center;
}

当我将此 css 添加到 .ngg-albumoverview 时，它会显示六列并缩小它们，但第二张图片放在第一张下方，而不是旁边，第三张图片在第一张旁边。

columns:100px 6;
-webkit-columns:100px 6; /* Safari and Chrome */
-moz-columns:100px 6; /* Firefox */
4

1 回答 1

0

CSScolumns只是页面的隔离，与页面的其余部分相同。您的图像布局如下：

[1][3][5]
[2][4][6]

因为页面的流程从上到下并根据元素宽度根据需要扩展。

columns除非您删除并用响应式网格替换它，否则您的图像将不会按您想要的顺序排列。如果您希望图像看起来像：

[1][2][3]
[4][5][6]

您需要将.ngg-thumbnail宽度调整为百分比（其中包含边距、边框和填充间距，并且在其中 3 个之间加起来接近 100%），将它们浮动到左侧并给出您.ngg-thumbnail img的 amax-width: 100%;和height: auto;. 确保浮动.ngg-thumbnail父元素而不是img它们将从文档流中删除并且不与网格对齐，除非您完美地调整所有内容（并且您不希望那样）。

clear: left;差点忘了——如果你的宽度加起来没有达到 100%，请确保在第 4 张图像上添加一个，因此默认情况下它从新行开始。您可以选择第四张图片：

.ngg-thumbnail img:nth-of-type(4);

如果您想以愉快的方式了解更多相关信息，这里是一个很好的资源。

于 2013-10-19T11:07:14.557 回答