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

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

17 голосов
/ 10 июня 2011

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

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

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

Ответы [ 4 ]

31 голосов
/ 10 июня 2011

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

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

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

IE7 все еще имеет некоторое использование , но вы должны проверить Google 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/ против: http://jsfiddle.net/g6yB4/4/)

1 голос
/ 10 июня 2011

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

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

0 голосов
/ 10 июня 2011

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

...