css - 2 列 ，第一列动态宽度

Question

我尝试用“div”元素转换以下内容:

<table><tbody>
<tr>
<td class="username">matthew</td>
<td class="text">hello world!</td>
</tr>
<tr>
<td class="username">this is a longer username</td>
<td class="text">hey!</td>
</tr>
</tboby></table>
.username{text-align:right;}
.text{padding-left:20px;}

http://jsfiddle.net/wqEq3/1/

只有当第一列是固定宽度时，我才能用“div”重现它，我希望它是动态的，就像上面带有“table”的例子一样。

<div id="container">
    <div class="message">
        <div class="username">matthew</div>
        <div class="text">hello world!</div>
    </div>
    <div class="message">
        <div class="username">this is a longer username</div>
        <div class="text">hey!</div>
    </div>
</div>
​.message {overflow:hidden;}
.username {
    text-align:right;
    /*width:200px; How to get rid of the fixed width?*/
    float:left;
}
.text {
    padding-left:20px;
    float:left;
}

http://jsfiddle.net/cGsyK/2/

Answer 1

如果你想保存标记，我认为只有使用 display: table* 选项才能做到这一点，IE7 及更早版本不支持它。

演示:http://jsfiddle.net/EgUn4/