如何在不使用表的情况下制作这个2列表？

Question

http://jsfiddle.net/pkLMC/

左列应缩小以适合,右列应占据页面宽度的其余部分.它也需要与IE7一起使用

问题的形象

<style>
table
{
    width:100%;
    border:1px solid black;
}
td
{
    vertical-align:top;
    border:1px solid green;
    background-color:orange;
}
.left
{
    /* trim the column to the minimum necessary width required to avoid overflow */
    width:1px;
}
.long
{
    /* this layout works whether the content of the right column wraps or not */
    /* display:none; */
}
</style>

<table>
<tr><td class="left">ABC</td><td>Lorem ipsum dolor</td></tr>
<tr><td class="left">ABCDE</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td></tr>
<tr class="long"><td class="left">ABCDEFG</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
<tr class="long"><td class="left">ABCDEFGHI</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
<tr class="long"><td class="left">ABCDEFGHIJK</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
</table>

Answer 1

您在示例中显示的数据本质上是表格式的,因为它包含行和列.没有HTML表格的CSS可以用于格式化列中的内容(比如报纸).一旦你有行和列都有可变宽度列(如你的数据),表(/ table,/ tr,/ td 等)是要走的路.

您可能想要对行进行条带化.这是一个例子:http://jsfiddle.net/peavU/