css - 2列带有<div>，第一列动态宽度

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/