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

Question

То, что я пытаюсь сделать, это иметь первый 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>

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

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

Answer 1

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

Это не работает в IE7 (или IE6, но кого это волнует?): http://caniuse.com/

Если вам не нужна поддержка 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/ против: http://jsfiddle.net/g6yB4/4/)

Answer 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>

Answer 3

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

Answer 4

Недостатком использования строки таблицы (очень связанной с OP) является то, что вы не можете использовать поля / отступы для строки.