1

私は次の結果を達成しようとしています。ブラウザーのサイズが変更されたときに下の行にドロップする固定幅と高さの多数の DIV (ボックスまたはタイルの種類) を行に表示できるレスポンシブ レイアウトを構築したいと考えています。「タイル」のグループは常にブラウザー ウィンドウの中央に配置する必要がありますが、単一のタイルを下の行にドロップすると左に揃える必要があります。レイアウトは IE6 以降と互換性がある必要があります。

私の主な問題は IE 6 と 7 (8 を知らない) に関するものです。これ.containerは、タイルのグループを含む DIV ( ) がdisplay: tableIE6+ でサポートされていないことがわかっているためです。.HTC ファイルを使用した回避策があることは知っていますが、より良い解決策があると確信しています。必要に応じて JQuery を使用したり、純粋な CSS を使用したりする心配はありません。

レスポンシブレイアウト

ブラウザのサイズに合わせて横幅をmedia queries設定します.container

@media (min-width: 1110px) {
    .container{
        width: 1100px;
    }
}

これは機能しますが、IEでは機能しません

.container {
    display:table;
    margin-left:auto;
    margin-right:auto;
}

.box {
   float: left;
   background: #CECECE;
   height: 200px;
   width: 150px;
   margin: 5px;
}

デバイスを回転させたときに「タイル」がそれに応じて移動するように、モバイル デバイスでもこの同じレイアウトを使用したいと思います。

4

1 に答える 1