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 种不同尺寸。

Coding here..

Full screen example here.

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%;
    }
}