it-swarm.com.ru

Есть ли недостаток в использовании `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>

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

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

17
Sinan

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

Это не работает в 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/ против без: http://jsfiddle.net/g6yB4/4/ )

31
thirtydot

Вы могли бы сделать что-то вроде этого. Это ставит ваш основной контент на первое место. Вы можете использовать вертикально повторяющееся css-фоновое изображение в вашем основном контейнере "content", чтобы создать иллюзию фона, бегущего вниз по левому столбцу.

<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) является то, что вы не можете использовать поля/отступы для строки.

0
rob_james

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

0
cchana