0

3 つの div が並んでいるセクションがあり、メインの div (中央) がスペースの 50%、左右の 25% を占めているとします。

現在、メディアクエリを使用して、kindle ポートレート (600 x 1024) でサイトを最適な状態で表示しています。

解像度が低いので、サイトの見栄えを良くするために、メインの列が表示され、彼女の下部に以前横にあった2つが表示されると思いました。

「float」属性を使用してメインの div を左側に配置できましたが、他の 2 つがメインの div の下に入らないことがあります。

それは可能ですか？私は努力していますが、自分のふりをすることができるようになるにはほど遠いです.

HTML コード:

<section id="content">
<div class="main_1">
    <div></div>
</div>
<div class="main_2">
    <div></div>
</div>
<div class="main_3">
    <div></div>
</div>

CSS:

   #content{
    border:0;
    padding:15px 5px 15px 55px;
    margin:0;
    min-height:600px;
    border:1px solid;
    overflow:visible;
    box-shadow:3px 0 4px rgba(0, 0, 0, 0.1);
    overflow:hidden;
    left:0px;
    right:0px;
    top:0px;
    z-index:1;
}

.main_1,.main_2,.main_3{
    display:inline;
    float:left;
    margin-left:1%;
    margin-right:1%;
    padding:9px 0;
    min-height:10px;
}

.main_1{width:23.0%;}
.main_2{width:45.0%;}
.main_3{width:22.0%;}

以前のコードは高解像度用でした。kindle（600x1024）の場合、次を使用してメインのdivを右側に配置しましたが、他のものは左側に混乱しています：

CSS:

.main_1,.main_3{
        display:inline;
        float:right;
        margin-left:1%;
        margin-right:1%;
        padding:9px 0;
        min-height:10px;
    }

    #content .main_2{
    float: left;

}

解決済み:

コードの観点からそれが最良のアイデアであったかどうかはわかりませんが、左側の div を複製し、中央と右側の div の間に非表示にします。

メディア クエリでは、左の div を非表示にして、非表示にしていたものを「アクティブ化」する必要がありましたが、現在は中央の div の右側にあります。

4

1 に答える 1

0

常に幅の広いコンテンツを最初に設定し、最後の 2 つを順番に設定すると、その変更だけで問題が解決する可能性があります。最初のコンテンツ ボックスの下。分かりますか？

これを行うと、幅の広い要素を左に、他の 2 つを右にフロートさせることができます。他の 2 つの要素を右に移動すると順序が逆になることを忘れないでください。そのため、html を少し変更する必要があります。

于 2012-07-24T17:28:14.710 に答える