0

左、中央、右の 3 列のレイアウトがあります。

<div id="content-area" class="clearfix">

    <div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>

    <div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>

    <div id="content-right">
        <f:format.raw>{navigator}</f:format.raw>
        <f:format.raw>{content_right}</f:format.raw>
    </div>

</div>

このCSSで

#all-wrapper {
    width: 960px;
    margin: 0 auto;
}

#content-area {
    padding: 10px 0;
    margin: 5px auto;
}

#content-left {
    float: left;
    width: 180px;
    min-height: 400px;
}

#content-middle {
    width: 600px;
    text-align: left;
    padding: 0 10px;
    line-height: 20px;
}

#content-right {
    float: right;
    min-width: 180px;
    min-height: 200px;
    text-align: left;
}

左が180px、真ん中が600px、右が180pxで、960pxのレイアウトにするとこんな感じ。

http://jsfiddle.net/kxuW6/

おおむねこれでうまくいきますが、右欄の内容に合わせて、中欄の幅をある程度柔軟に設定したいです。右側の列に幅 360px の画像を配置すると、中央の列は幅 420px になります。

私の問題は、幅が 180px を超える画像、fx. 360px、このフィドルに従って、列のフローティングを壊します

http://jsfiddle.net/5hNy5/

このフィドルのようにしたいのですが、中央の列に固定幅がありません。

http://jsfiddle.net/Eqwat/

4

3 に答える 3

1

display: table-cellフロートの代わりに使用...

最新のブラウザをサポートしている場合は、次を試すことができます。

#content-area {
    width: 960px;
    padding: 10px 0;
    margin: 5px auto;
    display: table;
    border: 1px dashed blue;
}
#content-left {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    width: 180px;
    height: 200px;
}
#content-middle {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    text-align: left;
    padding: 0 10px;
    line-height: 20px;
}
#content-middle p {
    margin-top: 10px;
}
#content-right {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    width: 180px;
    height: 200px;
    text-align: left;
}

テーブルセルの幅の値は最小値のように機能するため、どちらかに画像を挿入すると左右の列が拡張され、中央の列が残りの幅を占めるように調整されます。

デモを参照してください: http://jsfiddle.net/audetwebdesign/V7YNF/

于 2013-10-28T15:14:20.273 に答える
0

列のソース順序をシャッフルしても問題ない場合は、一番下に降格して、それを#content-middle与えることができます.display: blockoverflow: hidden

マークアップ:

<div id='all-wrapper'>
    <div id="content-area" class="clearfix">
        <div id="content-left"></div>
        <div id="content-right"></div>
        <div id="content-middle"></div>
    </div>
</div>

CSS

#all-wrapper {
    width: 960px;
    margin: 0 auto;
    }

#content-left {
    float: left;
    width: 180px;
    min-height: 400px;
    }

#content-middle {
    display: block;
    overflow: hidden; 
    }

#content-right {
    float: right;
    min-width: 180px;
    min-height: 200px;
    }

これで、右側の列の幅が変更されたときに、中央の列が使用可能なスペースを占有します。

デモ: http://dabblet.com/gist/7200659

必読: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

于 2013-10-28T17:13:19.330 に答える