CSS 两列动态宽度答案

【问题标题】：CSS two columns dynamic widthCSS 两列动态宽度
【发布时间】：2015-08-21 02:48:28
【问题描述】：

我有一个单行 div，内容在左右：

---------------------------------------------------------------------------
|Single line of text                          Icon and single line of text|                                                
---------------------------------------------------------------------------

如果没有足够的空间，我希望右边的内容占据它需要的宽度，而左边的内容应该占据剩余的可用宽度（隐藏溢出以保持单行）。

问题是内容（左右）是动态的，所以我事先不知道它的宽度。

有什么提示吗？谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

试一试：

http://jsfiddle.net/thirtydot/fjJMX/191/

CSS：

#lineContainer {
    overflow: hidden; /* clear floats */
    outline: 1px solid red;
    width: 300px /* just to make demo easier */
}
#lineLeft {
    overflow: hidden; /* hide extra text */
    white-space: nowrap;
    background: #f0f

}
#lineRight {
    float: right;
    background: #ccc
}

HTML：

<div id="lineContainer">
    <div id="lineRight">right right right right right</div>
    <div id="lineLeft">left left left</div>
</div>

【讨论】：

完美运行。我曾假设浮动元素需要具有定义的宽度。谢谢！
也许那个版本的 Firefox 有错误？它现在适用于 Firefox 40.0.2。
太糟糕了，你必须把正确的内容放在 HTML 的左上方。你能想出一个解决方案，让你的 html 保持（对我来说）更自然的顺序，左边的内容在前，右边的内容在后？恐怕屏幕阅读器会以错误的顺序阅读内容，否则
@Tobbe：您可以改用基于display: table-cell 的解决方案example here。
是的，这就是我们最终所做的。谢谢你:)

【解决方案2】：

浮动只有一列应该可以工作。

.left {
   float: left;
}
.right {
   overflow: hidden;
   padding-left: 20px;
}

见updated fiddle

【讨论】：