web-dev-qa-db-ja.com

divで `display：table-cell`を使用することの欠点はありますか？

私が達成しようとしているのは、固定幅の最初の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つ目は将来頭痛の種になると思います。

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

htmlcsscss-floattablecell
17
Sinan

display: table-cellは、1つの欠点だけで、完全に使用できます。

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

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

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

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

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/ ）

31
thirtydot

あなたはこのようなことをすることができます。メインコンテンツを最優先します。メインの「コンテンツ」コンテナで垂直方向に繰り返される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>
1
Sam

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

0
rob_james

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

0
cchana