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

<p>то, что я пытаюсь сделать, это иметь первый div с фиксированной шириной и жидкий второй div, который заполнит оставшуюся ширину ширины родительского div.</p><pre><code><div class='clearfix'> <div style='float:left; width:100px;'>some content</div> <div style='float:left'>some more content</div> </div> </code></pre><p>и на этом все кажется хорошо и плавно.</p><pre><code><div style='display:table'> <div style='display:table-cell; width:100px;'>some content</div> <div style='display:table-cell'>some more content</div> </div> </code></pre><p>я хочу продолжить со вторым, но я чувствую, что второй пример даст мне головную боль в будущем.</p><p>не могли бы вы предложить некоторые предложения или идеи?</p>

<p><code>display: table-cell</code> идеально подходит для использования, только с одним недостатком ..</p><p>это не работает в ie7 (или ie6, но кого это волнует?): <a href="http://caniuse.com/#search=css-table">http://caniuse.com/#search=css-table</a> </p><p>если вам не нужна поддержка ie7, не стесняйтесь использовать его.</p><p>ie7 все еще имеет <a href="http://gs.statcounter.com/#browser\_version-ww-monthly-201005-201105">некоторое использование</a> , но вы должны проверить свою аналитику, а затем принять решение.</p><hr><p>чтобы ответить на ваш <em> конкретный </em> вариант использования, вы <em> можете </em> сделать это без <code>display: table-cell</code>, при условии, что вам не нужно <code>height</code> для настройки в зависимости от содержимого:</p><p> <a href="http://jsfiddle.net/g6yb4/">http://jsfiddle.net/g6yb4/</a> </p><pre><code><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> </code></pre><p>(почему <code>overflow: hidden</code>? с: <a href="http://jsfiddle.net/g6yb4/3/">http://jsfiddle.net/g6yb4/3/</a> против без: <a href="http://jsfiddle.net/g6yb4/4/">http://jsfiddle.net/g6yb4/4/</a> )</p>

<p>вы могли бы сделать что-то вроде этого. это ставит ваш основной контент на первое место. вы можете использовать вертикально повторяющееся css-фоновое изображение в вашем основном контейнере "content", чтобы создать иллюзию фона, бегущего вниз по левому столбцу.</p><pre><code><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> </code></pre><p>для расширения до 3-х колонн с центром жидкости:</p><pre><code><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> </code></pre>

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

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