我尝试用“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;}
只有当第一列是固定宽度时,我才能用“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;
}
最佳答案
如果你想保存标记,我认为只有使用 display: table*
选项才能做到这一点,IE7 及更早版本不支持它。
关于css - 2 列 <div>,第一列动态宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9515675/