0

以前、レスポンシブ グリッドの作成に関する質問を作成し、ここの皆さんの助けのおかげでうまくいきましたが、今は次の段階で苦労しています。

幅がそれぞれ 33.3% の 3 つの列 (3 つの画像) を持つグリッドが必要です。max-width:100%次に、コンテナの幅に合わせて拡大縮小するために、内部に画像を配置します。

今、私はそれらを平均的なモバイル解像度でスタックさせることに固執しています. したがって、本質的に、それらが小さすぎて3つ並んで簡単に表示できない場合は、それらを2つ並べて（3行で合計6つの画像を作成）、次に長いスタックで1行につき1つに減らしたい.

JSフィドルはこちら

4

2 に答える 2

2

先に進む前に、おそらくメディア クエリとレスポンシブ デザインの使用方法を学ぶ必要があります。

特定のケースでは、このデモのようなことを行うことができます(ウィンドウを狭めて実際の動作を確認してください)。

.product{
    width:50%; /* initially, each row contains 2 products */
    float: left;
    /* no need for display:block; */
}

@media screen and (min-width:450px) { /* <--- this is a media query */

    /*
        everything inside this media query will be processed
        only if the viewport is larger then 450px
    */

    .product{
        width:33.3%; /* larger screens will diplay 3 products per row */
        /* float is already declared */
    }

}

明らかに、これは単なる例です。.product各要素の中に何が入っているかを知っています。メディア クエリをマスターするだけで、あらゆるバリエーションを実行できるようになります。

たとえば、小さな画面で 1 行に 1 つの製品のみを表示する場合は、次のようにします。

.product{
    /* nothing here! 1 product per row */
}

@media only screen and (min-width:450px) and (max-width:1023px) {
    .product{
        width:50%; /* 2 products per row */
        float:left;
    }
}

@media screen and (min-width:1024px) {
    .product{
        width:33.3%; /* 3 products per row */
        float:left;
    }
}

...等々。これはさまざまな方法で実行できますが、プロジェクトによって異なります。

于 2012-10-15T20:25:47.820 に答える
0

あなたが探しているのはこのようなものですか？ここでの秘訣は、製品divに絶対最小幅を設定することです。これを、floatプロパティと組み合わせると、目的の結果が得られます。

#content{
  width:90%;
  margin-top: 60px;
  margin-left:5%;
  margin-right:5%;
}

.product{
    width:33.3%;
    min-width:100px;
    display:block;
    float: left;
}

.product img{
max-width:100%;
}

body{
    background-color:#666;
}
于 2012-10-15T20:12:28.757 に答える