0

私はスケルトンを使用して流動的なレイアウトを作成していますが、ほとんどの場合うまく機能していますが、magento でこの 2 列のレイアウトに問題があります: http://watchgearonline.co.uk/watch-straps.html

左側のサイドバーのナビゲーションは 3 列に設定され、右側のメイン パーツは 12 列に設定されています。

ページの幅を減らすと、右側が下にジャンプし、それを補うために左側が突然非常に広くなり、見栄えがよくなくなります。

CSS max-width: 160px; を使用して停止しようとしました。左側のサイドバーに適用されます - より良いですが、それでもあまり良くありません。右側の列が飛び降りず、そのままの位置にとどまっていればよかったのにと思います。

右側の列をそのままの状態に保ちながら、そのサイズと内容を流動的に保つにはどうすればよいですか? それとも、この領域からスケルトンを取り出して静的コンテンツにする方がよいのでしょうか?

4

1 に答える 1

0

流動的なレイアウトを取得するには、小さな画面で使用widthすることをお勧めします。%すべてのwidth要素は、メディア クエリでピクセル単位で指定されます。例：

@media only screen and (max-width: 767px) and (min-width: 480px){
    .container {
        width: 420px;
     }
}

これは、 skeleton.cssのdivクラスのスタイリングです。containerしたがって、ウィンドウのサイズを変更し、幅がメイン コンテナーの下767pxに移動すると、 に変わります。左側のサイドバーと製品リストの div (右側のセクションまたはメイン パーツ) にもピクセル単位で指定された幅があり、右側のセクションが下にジャンプします。これら 2 つのブロックを並べて配置するスペースはありません。width420px

@media only screen and (max-width: 767px) and (min-width: 480px){
        .container {
            width: 90%;
         }
        .container .sidebar.three.columns{
            max-width: 20%;
         }
         .container .twelve.columns{
             width:75%;
             padding-right:0;
         }
    }

div上記の css を試して、ウィンドウのサイズを変更したときに s がどのように動くかを確認してください。%これは、幅を使用したときにブロックが滑らかに動くことを示すサンプル コードです。同様%に、メディア クエリのさまざまな画面に幅を使用します。

これが何らかの形で役立つことを願っています。

于 2014-03-25T11:41:55.833 に答える