两列html布局,带有拉伸到适合列

Question

我正在寻找一个table行为像a 的2列非布局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/

超文本标记语言

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