Question

我尝试显示两行六列，并在浏览器窗口缩小时缩小。原始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 */

Answer 1

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

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

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

除非您删除columns并将其替换为响应网格，否则您的图片将不会按照您想要的顺序排列。如果您希望图像显示为：

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

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

几乎忘记了 - 如果您的宽度加起来不是100％，请确保在第4张图片上添加clear: left;，以便默认情况下从新行开始。您可以使用以下选项选择第4张图像：

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

Here is a good resource如果您想要一种愉快的方式来了解更多信息，请为您提供。

显示两行六列并让它们缩小

1 个答案: