HTML-макет с двумя столбцами и растянутыми по размеру столбцами

Question

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

http://jsfiddle.net/YGb2y/
это работает, но это таблица, и, как мы все знаем, таблицы не являются идеальным вариантом макетов. Я буду использовать его, если придется, но я бы хотел найти более семантически подходящий способ сделать это

обратите внимание, как левый столбец растягивается, чтобы вместить содержимое, а правый столбец занимает оставшуюся часть свободного пространства

<table>
    <tr><td class="left">12345</td><td class="right">...</td></tr>
    <tr><td class="left">123456</td><td class="right">...</td></tr>
    <tr><td class="left">1234567</td><td class="right">...</td></tr>
    <tr><td class="left">12345678</td><td class="right">...</td></tr>
    <tr><td class="left">123456789</td><td class="right">...</td></tr>
    <tr><td class="left">1234567890</td><td class="right">...</td></tr>
</table>

table
{
    width:100%;
}
.left
{
    width:1px;
    background-color:blue;
    color:white;
}
.right
{
    background-color:gray;
}

Я попытался изменить это, чтобы использовать ul / li / div, но я могу установить фиксированную ширину или процент в левом столбце. Там нет width:stretch-to-fit.
http://jsfiddle.net/cj6PR/

HTML

<ul>
    <li><div class="left">12345</div><div class="right">...</div></li>
    <li><div class="left">123456</div><div class="right">...</div></li>
    <li><div class="left">1234567</div><div class="right">...</div></li>
    <li><div class="left">12345678</div><div class="right">...</div></li>
    <li><div class="left">123456789</div><div class="right">...</div></li>
    <li><div class="left">1234567890</div><div class="right">...</div></li>
</ul>

CSS

ul
{
    list-style:none;
    width:100%;
}
li
{
    clear:both;
    position:relative;
    overflow:hidden;
}
li div
{
    padding:5px;
}
.left
{
    float:left;
    width:20%;
    background-color:blue;
    color:white;
}
.right
{
    background-color:gray;
}

Предложения

Answer 1

Это то, что я закончил с

http://jsfiddle.net/cj6PR/4/

HTML

<ul>
    <li><div class="left">12345</div><div class="right">...</div></li>
    <li><div class="left">123456</div><div class="right">...</div></li>
    <li><div class="left">1234567</div><div class="right">...</div></li>
    <li><div class="left">12345678</div><div class="right">...</div></li>
    <li><div class="left">123456789</div><div class="right">...</div></li>
    <li><div class="left">1234567890</div><div class="right">...</div></li>
</ul>

CSS

ul
{
    display:table;
    width:100%;
}
li
{
    display:table-row;
}
li div
{
    display:table-cell;
}
.left
{
    width:1px;
    background-color:blue;
    color:white;
}
.right
{
    background-color:gray;
}

JS (взлом IE7)

if ($.browser.msie && $.browser.version == 7)
{
    $("ul").wrapInner("<table />");
    $("li").wrap("<tr />");
    $("li div").wrap("<td />");
}

Answer 2

Вы не можете использовать фиксированную ширину, если вы не знаете максимальную ширину содержимого.

Вы не можете получить их до одной ширины, которая все еще гибка без JavaScript, если вы используете 1 divза строку.

http://jsfiddle.net/Lp2un/

Answer 3

Вы можете указать ширину со значением em, а не %, таким образом, она всегда будет относительной по отношению к размеру текста, таким образом, менее вероятно, что она не будет достаточно широкой.вы можете указать min- и max-width в px, чтобы макет не слишком ломался.Фактические значения этих значений вы должны выяснить сами.

(имеется в виду ваше правило .left css)

.left {
    float:left;
    width:15em; /* or any other value that you consider wide enough */
    background-color:blue;
    color:white;
}

Или

.left
{
    float:left;
    width:20%;
    min-width: 125px; /* whatever suits your needs */
    max-width: 150px; /* whatever suits your needs */
    background-color:blue;
    color:white;
}

Ещеальтернатива также состоит в том, чтобы ваши div'ы вели себя как таблица, фактически не будучи таблицей

См. http://www.quirksmode.org/css/display.html#table для получения дополнительной информации об этой идее.

Answer 4

Я думаю, это то, что вы ищете, см. обновленную демо-скрипку .

CSS:

#wrapper {
    overflow: hidden;
}
#sidebar {
    float: left;
}
#content {
    overflow: hidden;
}

HTML:

<div id="wrapper">
    <div id="sidebar">

    </div>
    <div id="content">

    </div>
</div>