1

うまくいけば、これは答えるのが簡単な質問です-それは私を非常に困惑させます:

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 のように、列間のギャップが固定され、列の幅が固定されたまま、コンテンツの左右の余白が変化する方法はありますか?

4

1 に答える 1

0

このようなものが欲しいですか？ブラウザのサイズを変更して、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%;
    }
}
于 2013-08-29T17:31:55.617 に答える