0

これがjavascriptなしでできるかどうかはわかりませんが、解決策があることを願っています. このフィドルを考えてみましょう: http://jsfiddle.net/PPeYH/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.content {
    border: 1px solid;
    min-height: 3em;
}
.container {
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    clear: both;
}
#placeholder-body {
    position: relative;
    border: 0;
}
.split-tile {
    float: left;
}
.split-left {
    width: 60%;
}
.split-left .content {
    margin-left: auto;
    margin-right: 0;
    max-width: 360px;
}
.split-right {
    width: 40%;
}
.split-right .content {
    margin-left: 0;
    margin-right: auto;
    max-width: 240px;
}

<div><div class="content container">Header</div></div>
<div id="placeholder-body">
    <div><div class="content container">Some content</div></div>

    <div class="tile-1 split-tile split-left">
        <div class="content">60% width.</div>
    </div>
    <div class="tile-2 split-tile split-right">
        <div class="content">40%</div>
    </div>

    <div><div class="content container">Some content</div></div>
</div>
<div><div class="content container">Footer</div></div>

ここに表示されている構造は、RWD 構造の単純化されたバージョンです。レイアウト全体を境界内に収める必要があります。ブラウザーの幅を上下に変更すると、「60%」および「40%」とマークされた div が残りの div の境界を尊重しないことがわかります。

「コンテナに 60% と 40% の div をラップしてみませんか?」と疑問に思うかもしれません。ここで紹介する DOM 構造は、すでに複雑なシステムで CMS を使用してレイアウトされています。これを変更するには、少しリファクタリングするだけでは不十分です。タイルをそのまま並べて生活する必要があります。

私の質問はこれです。cssのみを使用して、残りのレイアウトの左端と右端を維持するように、中央のdivで60/40の分割を実現する方法はありますか?

更新: #placeholder-body を最大幅に制限することもできません。これは、設計者が構造内の一部の div に全幅の背景色を作成することを望んでいるためです。

4

2 に答える 2

-1

分割タイルを別のコンテナ内に挿入すると機能します。

<div class="container">
    <div class="tile-1 split-tile split-left">
        <div class="content">
            60% width.
        </div>
    </div>
    <div class="tile-2 split-tile split-right">
        <div class="content">
            40%
        </div>
    </div>
</div>
于 2013-11-11T12:52:32.283 に答える