制作div使用容器中的所有可用空间

时间:2012-12-22 01:55:27

标签: html css

我有这个容器div有两个元素:

<div id="container">
    <div id="right">Some, list, of, words, that, I, use</div>
    <div id="left">Person Name</div>
</div>​

我想让 #right div占用 #left div留下的空间并隐藏溢出。

另请注意, #left div宽度是可变的。

到目前为止,我想出了这个css:

#container {
    width: 250px;
    border: 1px solid black;
    padding: 10px;
}

#left {
    white-space: nowrap;
    border: 1px dotted #ccc;
    display: inline;
}

#right {
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dotted #ddd;
    white-space: nowrap;
    display: inline;
    float: right;
}

#right div仍会显示所有文字并最终显示在以下行中,如下所示:

Sample result

我玩 #right div不浮动,添加width: 100%但似乎没有任何效果......

有没有人知道如何让两者都显示在同一行,但让 #right div隐藏其溢出?

jsFiddle链接:http://jsfiddle.net/y4xnx/13/

修改修复了我对哪些div应该做什么的解释。

2 个答案:

答案 0 :(得分:6)

#right 之前添加 #left 会有所帮助:

<div id="container">
    <div id="left">Person Name</div>
    <div id="right">Some, list, of, words, that, I, use</div>
</div>​

然后css中的一些变化应该做你想要的:

#left {
    white-space: nowrap;
    border: 1px dotted #ccc;
    float: left;
    margin-right: 5px;
}

#right {
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px dotted #ddd;
    white-space: nowrap;
}

示例:http://jsfiddle.net/grc4/MvXuN/

答案 1 :(得分:1)

我试图从你的问题中实现我理解的任何东西。在这里查看小提琴:http://jsfiddle.net/y4xnx/20/

HTML:

<div id="container">
     <div id="left">Person Name</div>
    <div id="right">Some, list, of, words, that, I, use</div>
</div>​

CSS:

#container {
    width: 250px;
    border: 1px solid black;
    padding: 10px;
    white-space:nowrap;
    overflow:hidden;
}

#left {
    border: 1px dotted #ccc;
    display: inline-block;
}

#right {
    display:inline-block;
    border: 1px dotted #ddd;
}
​