0

3 つの div で 3 列のレイアウトを作成するのに苦労しています。左の div は固定幅である必要があります。中央と右の div は流動的な幅にする必要があります。ブラウザーが水平方向にサイズ変更された場合、中央と右の div は比例してサイズ変更する必要があります。

他の固定列を使用した 3 列の流動レイアウトの例をいくつか見ましたが、固定 - 流動 - 流動レイアウトの例は見たことがありません。

私の問題を再現するためのマークアップは以下のとおりです。私がこれをトラブルシューティングしてきたので、CSS は少し冗長です。ブラウザのサイズを変更すると、右の div が水平線の下に消えます。また、3 つの列は #caption_stripe の幅の 100% を占める必要がありますが、そうではありません。右側に表示される約 2 ～ 3 ピクセルのギャップがあります。

<html>
<head>
<style>
.contentMain {
    clear: both;
    overflow: hidden;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto 0 auto;
}
#lessons_wrapper { background-color: blue; }
#caption_stripe {
    position: relative;
    overflow: hidden;
    height: 37px;
    width: 100%;
    max-width: 1024px;
    font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
    color: white;
    margin: 0;
    padding: 0;
}
#caption_subjects {
    float: left;
    height: 37px;
    background-color: #3c3d3d;
    width: 13%;
    max-width: 138px;
    min-width: 138px;
    margin: 0;
    padding: 0;
}

#caption_topics {
    float: left;
    height: 37px;
    background-color: #707070;
    width: 42%;
    max-width: 422px;
    min-width: 100px;
    margin: 0;
    padding: 0;
}
#caption_modules {
    float: left;
    height: 37px;
    background-color: #989898;
    width: 45%;
    max-width: 464px;
    min-width: 100px;
    margin: 0;
    padding: 0;
}
</style>

</head>
<body>
<div class="contentMain">
    <div id="lessons_wrapper" style="display:block">
        <div id="caption_stripe">
            <div id="caption_subjects">SUBJECTS</div>
            <div id="caption_topics">TOPICS</div>
            <div id="caption_modules">MODULES</div>
        </div>
        <br style="clear:both;" />
    </div>
</div>
</body>
</html>

また、このキャプションの下に表示される div を使用して、より大きな規模でこれを行う必要があります。今のところ、これが機能する例を得ることができれば、それらも同様に機能させることができるでしょう。

ご協力いただきありがとうございます。

4

1 に答える 1

1

修正する必要がある場合、最初の列に % 幅があった理由がわかりません。

ただし、注意すべき主なことは、fluid div をラッピング div に入れることです。次に、固定列の幅に等しい左パディングをラッパーに与えます。

.fluid-wrapper {
    width: 100%;
    height: 100%;
    padding-left: 100px;
}

これを機能させるには、ラッパーにbox-sizingを適用する必要があります。これは、パディングが追加されるのではなく、ラッパーの内側の幅から差し引かれることを意味します。

すべての要素にボックスサイズを使用することはかなり安全であり、流動的/レスポンシブなデザインを作成するときに非常に役立ちます.

*, *:after, *:before {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

これが実際の JSFiddle です: http://jsfiddle.net/nhwGA/1/

于 2013-03-27T22:15:23.900 に答える