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

调整浏览器大小时，列数会增加或减少以适合屏幕。但是，左侧和右侧柱都平放在屏幕一侧 - 柱之间的间隙保持稳定在20px - 但每列的宽度增加以填充剩余的间隙。

有没有办法可以让它像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%;
    }
}

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

1 个答案: