1

2 列の可変レイアウトで問題が発生しています。両方の列が;の div ( .dp_stage_sizer)内にあります。左に浮かんでいて、.overflow: auto.spl_asidespl_mainposition: relativemargin-left

これは、幅とマージンにピクセル値を使用している限り問題なく機能しますが、このサイトは流動的であるため (とにかく、特定のウィンドウ幅より下)、幅以外はすべて.dp_stage_sizerパーセント単位です。これによりspl_main、右側に余分なマージンが発生するため、親要素と整列せず、Webkit ブラウザーでのみ整列されます (ただし、マージンは Chrome よりも Safari の方がはるかに大きくなります)。

以下は、私が管理できるように蒸留されたバージョンのコードです。

HTML:

<div class="dp_stage_sizer">
    <div class = "spl_aside">
        aside
    </div>
    <div class = "spl_main">
        main
    </div>
</div>

CSS:

div.dp_stage_sizer
{
    position: relative;
    max-width: 1080px;
    margin: 0px auto;
    overflow: auto;

    background-color: silver;
}

.spl_main
{
    position: relative;
    margin: 0% 0% 0% 30%;
    overflow: hidden;

    background-color: green;
    height: 400px;
}

.spl_aside
{
    position: relative;
    float: left;
    width: 20%;
    overflow: hidden;

    background-color: red;
    height: 300px;
}

最後に、実験したい人のためのJSFiddleです。

以下は、Chrome の Web インスペクターを使用して撮影した画像で、3 つの div のそれぞれの余白を示しています。

dp_stage_sizer: <code>dp_stage_sizer</code> のマージン

spl_aside: <code>spl_aside</code> のマージン

spl_main: <code>spl_main</code> のマージン

4

2 に答える 2

1

この問題は、フローティングではなくposition: absoluteオンに設定することで回避できます。これは、ある時点でその下にコンテンツを配置したい場合.spl_aside、使用できなくなることを意味することに注意してください.clear:float

于 2012-12-05T16:01:07.393 に答える
1

別の解決策は、を使用することinline-blocksです。ただし、これをどのように実装するかは、必要なブラウザのサポートによって異なります。私の提案をフィドルに残します。

于 2012-12-05T16:11:58.323 に答える