0
<div class="parent clearfix" style="width:100%; height: 100px">

<div style="float: left; width:150px; height: 50%">
</div>

<div style="float: left;" class="target">
</div>

</div>

クラス「ターゲット」divの幅が、クラス「親クリアフィックス」のdivの幅よりも150px小さくなるようにしたいと思います

どうすればこれを達成できますか? 上記の例では、親 div は、指定された幅を持つ別の div の子です (この指定された幅は少し変更できます)。

4

3 に答える 3

4

display: table親と子に使用できますdisplay: table-cellFiddle)。

<div style="width:100%; height: 100px; display: table">
    <div style="display: table-cell; width:150px; height: 50%">
    </div>
    <div style="display: table-cell;">
    </div>
</div>

ただし、古いブラウザでは機能しません。

アップデート

別の方法はmargin-left: 150px、2番目の列にaposition: absoluteを、最初の列にaを与えることです。これはほとんどのブラウザで機能しますが、もちろんクリーンなバージョンではなく、最初の列のコンテンツが2番目の列のコンテンツよりも長い場合は問題が発生します。フィドル

于 2013-03-11T14:44:36.583 に答える
1

width: calc(100%-150px) CSS3 をサポートするブラウザーでのみサポートされている必要があり ます。

于 2013-03-11T15:12:11.160 に答える
0

半流動的なレイアウトについては、http ://alistapart.com/article/holygrailをご覧ください。これはまさにあなたが探しているものだと思います。

于 2013-03-11T14:49:26.540 に答える