Есть ли недостаток в использовании `display: table-cell`on divs?

То, что я пытаюсь выполнить, это иметь первый div с фиксированной шириной и жидкий второй div, который заполнит оставшуюся ширину ширины родительского 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>

Я хочу продолжить второй, но мне кажется, что второй пример даст мне головные боли в будущем.

Не могли бы вы предложить некоторые предложения или идеи?

Ответ 1

display: table-cell отлично подходит для использования с одним недостатком.

Он не работает в IE7 (или IE6, но кому это нужно?): http://caniuse.com/#search=css-table

Если вам не нужно поддерживать IE7, не стесняйтесь использовать его.

IE7 все еще имеет некоторое использование, но вы должны проверить свою Analytics, а затем принять решение.

Чтобы ответить на ваш конкретный вариант использования, вы можете сделать это без 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/ против без: <а4 > )

Ответ 2

Вы могли бы сделать что-то вроде этого. Сначала оно помещает ваше основное содержимое. Вы можете использовать вертикально повторяющееся фоновое изображение 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>

Ответ 3

Чтобы получить первый пример работы, вы также должны поместить содержащий div div, это позволит убедиться, что оба элемента внутри сидят так, как вы ожидали бы в нем. Не совсем уверен, что вы подразумеваете под "болью", хотя?

Ответ 4

Одна нижняя сторона таблицы table (очень связана с OP) заключается в том, что вы не можете использовать margin/padding в строке.