css - CSS 问题 - 浏览器窗口缩小/放大时自动调整列大小

Question

希望这将是一个容易回答的问题 - 这让我非常困惑：

我在设计页面时考虑了 Pinterest——将主要内容分成几列。我指定的列如下：

#Content {
width: auto;
margin: 0px auto;

-moz-column-count:auto;
-webkit-column-count:auto;
column-count:auto;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;

-moz-column-width: 294px;
-webkit-column-width: 294px;
column-width: 294px;
}

#Body {
width: 100%;
}

调整浏览器大小时，列数会增加和减少以适应屏幕。然而，左右两列都平靠在屏幕的一侧——两列之间的间隙保持稳定在 20 像素——但每列的宽度会增加以填充剩余的间隙。

有没有一种方法可以像 Pinterest 一样获得它——列之间的间隙保持固定，列宽保持固定——而内容的左右边距不同？

Answer 1

你想要这样的东西吗？调整浏览器的大小，以查看 3 种不同的大小。

在这里编码..

全屏示例在这里。

CSS：

@media screen and (min-width: 768px) {
    .col {
        width:18%;
        float:left;
        margin:0px 1%;
    }
    img {
        width:100%;
        height:auto;
        margin-top:6%;
    }
}
@media screen and (max-width: 767px) {
    .col {
        width:30%;
        float:left;
        margin:0px 1%;
    }
    img {
        width:100%;
        height:auto;
        margin-top:6%;
    }
}
@media screen and (max-width: 480px) {
    .col {
        width:45%;
        float:left;
        margin:0px 1%;
    }
    img {
        width:100%;
        height:auto;
        margin-top:6%;
    }
}