css - 2 列 <div>,第一列动态宽度

标签 css

我尝试用“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/

最佳答案

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

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

关于css - 2 列 <div>,第一列动态宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9515675/

相关文章:

html - flexbox 中的图像行为(行嵌入列中)

html - 我想在 p 标签之间调整 blockquote 标签而不发生文本冲突

jquery - 如果 div 内部的 div 为空,则更改父 CSS 的背景颜色

html - 在 html 渲染中忽略用户数据

css - 如何将 CSS 样式表导入 Atom 内容?

javascript - 当另一个 Bootstrap 模型已经显示时,Twitter Bootstrap Modals 不起作用

html - 等列高度 Bootstrap

javascript - 绝对定位元素不填充容器宽度

javascript - 将 contenteditable div 限制为可见部分

css - 父 div 不包括所有子项