Question

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

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

如果没有足够的空间，我希望正确的内容占用所需的宽度，而左侧内容应占用剩余的可用宽度（隐藏溢出以保持单行）。

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

任何提示？感谢

Answer 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>

Answer 2

浮动只有一列可以工作。

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

请参阅updated fiddle

CSS两列动态宽度

2 个答案: