我有一个单行 div，内容在左侧和右侧:
---------------------------------------------------------------------------
|Single line of text Icon and single line of text|
---------------------------------------------------------------------------
如果没有足够的空间，我希望右边的内容占据它需要的宽度，而左边的内容应该占据剩余的可用宽度( overflow hidden 以保持单行)。
问题是内容(左&右)是动态的，所以我事先不知道它的宽度。
有什么提示吗？谢谢
最佳答案
试一试:
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>
关于javascript - CSS 两列动态宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5783823/