3

これが主なマークアップになります。

<div class="mancha">
    <div class="logo"></div>    
    <div id="content-area" class="espacio">
             <div class="eltitular">HEADER</div>
             <div class="lacarta">LEFT CONTENT</div>
             <div id="sidebar">RIGHT CONTENT</div>
        </div>
</div>

どこで（リンクで見ることができるより多くのルールがありますが、これは幅です）

.espacio{
    margin-left: 192px;
    background: transparent;
        width:808px !important
}
.lacarta{
        width:595px;
        float:left;
}
#sidebar{
        width:210px;
        float:right
}

問題は、.lacarta と #sidebar が隣り合って浮かんでいないことです (これは IE8 以下でのみ発生します)

ここでテストできます: http://goo.gl/ksFQI (firefox/chrome と比較すると、サイドバーがコンテナーの右側にないことがわかります..)

コンテナーが両方の要素に対して十分な大きさであるように思われることを IE8 開発者ツールで確認しました。

私が見逃したものは何か分かりますか？

-編集-

現在のIE: ここに画像の説明を入力

募集中 (Firefox のように): ここに画像の説明を入力

4

4 に答える 4

0

親コンテナを追加:

<div class="mancha">
    <div class="logo"></div>    
    <div id="content-area" class="espacio">
             <div class="eltitular">HEADER</div>
             <div>
                 <div class="lacarta">LEFT CONTENT</div>
                 <div id="sidebar">RIGHT CONTENT</div>
             </div>
    </div>
</div>
于 2013-04-04T12:33:11.030 に答える
0

このjsfiddleはそれを修正しますか: http://jsfiddle.net/hgrHq/

.lacarta{
    width:590px;
    float:left;
}

.lacarta の幅を少し減らしただけです。

余談ですが、列をこのようにレイアウトするためのレスポンシブ グリッド システムを検討することをお勧めします。例えば：

http://cssgrid.net/

http://semantic.gs/

そうすれば、このような並べ方の問題はなくなります...そして、すべての画面サイズに対応します。

于 2013-04-04T12:39:58.307 に答える