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

如果你想保存标记，我认为只能使用IE7及更早版本不支持的display: table*选项来执行此操作。

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

Answer 2

我使用名为“message”和“username”的2个容器div而不是一个div和一个text-align权限，所以即使username的宽度太大，所有用户名也都是该div的右侧。

此处：http://jsfiddle.net/KCgCs/1/

最长的用户名将设置用户名div的宽度，而所有其他用户名将设置为右侧。

Answer 3

您必须在width的{{1}}中设置px，并使用container s作为列。

Answer 4

为了保持相同的标记，我将用户名移动到一个div中，将文本移动到另一个div中。我不知道这会影响你如何填充，但它是一个选项

见http://jsfiddle.net/cGsyK/3/

Answer 5

像这样写：

.username {
    text-align:right;
    /*width:200px; How to get rid of the fixed width?*/
    float:left;
}
.text {
    padding-left:20px;
    overflow:hidden;
}

选中此http://jsfiddle.net/cGsyK/4/

带有<div>的2列，第一列动态宽度</div>

5 个答案: