html - 两列 html 布局，带拉伸(stretch)以适合列

Question

我正在寻找一个 2 列的非 table 布局，其行为类似于 table。并在 IE7 中工作

http://jsfiddle.net/YGb2y/
这可行，但它是一个表格，众所周知，表格不是布局的理想选择。如果必须的话，我会使用它，但我想找到一种语义上更合适的方式来做到这一点

请注意左列如何拉伸(stretch)以适应包含的内容，而右列如何占据剩余的可用空间

<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 />");
}