17

私が達成しようとしているのは、固定幅の最初のdivと、親divの幅の残りの幅を埋める流動的な2番目のdivを持つことです。

<div class='clearfix'>
  <div style='float:left; width:100px;'>some content</div>
  <div style='float:left'>some more content</div>
</div>

そしてこれではすべてが大丈夫で流動的であるように見えます。

<div style='display:table'>
  <div style='display:table-cell; width:100px;'>some content</div>
  <div style='display:table-cell'>some more content</div>
</div>

2つ目はやりたいのですが、2つ目は将来頭痛の種になると思います。

いくつかの提案や洞察を提供できますか？

4

4 に答える 4

31

display: table-cell欠点は1つだけですが、使用するのはまったく問題ありません。

IE7（またはIE6ですが、誰が気にしますか？）では機能しません：http：//caniuse.com/#search=css-table

IE7をサポートする必要がない場合は、気軽に使用してください。

IE7にはまだいくつかの使用法がありますが、アナリティクスを確認してから決定する必要があります。

特定のユースケースに答えるために、コンテンツに基づいて調整する必要がない場合は、なしでそれを行うことができます。display: table-cellheight

http://jsfiddle.net/g6yB4/

<div class='clearfix'>
  <div style='float:left; width:100px; background:red'>some content</div>
  <div style='overflow:hidden; background:#ccc'>some more content</div>
</div>

（なぜoverflow: hiddenですか？あり：http：//jsfiddle.net/g6yB4/3/ vsなし： http： //jsfiddle.net/g6yB4/4/）

于 2011-06-10T14:45:14.527 に答える
1

あなたはこのようなことをすることができます。メインコンテンツを最優先します。メインの「コンテンツ」コンテナで垂直方向に繰り返されるcss背景画像を使用して、左の列まで背景が走っているような錯覚を作り出すことができます。

<div id="content" style="clear:both;">
    <div id="mainwrap" style="float:left; width:100%;">
        <div id="main" style="margin-left:100px">
            Main content here
        </div>
    </div>
    <div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
        Left content here
    </div>
</div>

流体の中心を持つ3列に拡張するには：

<div id="content" style="clear:both;">
    <div id="mainwrap" style="float:left; width:100%;">
        <div id="main" style="margin-left:100px; margin-right:100px;">
            Main content here
        </div>
    </div>
    <div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
        Left content here
    </div>
    <div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
        Right content here
    </div>
</div>
于 2011-06-10T15:04:04.970 に答える
0

最初の例を機能させるには、含まれているdivもフロートする必要があります。これにより、内部の両方の要素が期待どおりに配置されるようになります。しかし、「痛み」とはどういう意味かよくわかりませんか？

于 2011-06-10T14:45:17.587 に答える
0

テーブル行（OPに非常に関連している）を使用することの1つの欠点は、行にマージン/パディングを使用できないことです。

于 2015-05-18T14:39:02.677 に答える