Html 具有最大可能大小的Div（跨越可用宽度的列）

我有一个固定宽度的父div，一行内有3个div。我希望第二个和第三个div的宽度适合其内容，第一个div将占据父级的其余宽度。所有div都是单行文本（

nowrap

），如果第一列文本太长（

overflow:hidden

）

除了父div之外，我不想显式指定任何宽度

<div id='main'>
    <div id='col1'>span me me me me me me me</div>
    <div id='col2'>abc</div>
    <div id='col2'>def</div>
 </div>

div {
    border: 1px solid black;
    float: left;
    white-space: nowrap;
    overflow: hidden;
}

div#main {
    width:200px;
}

div#col1 {
    /*width:150px;*/ /* I don't want this! */
}

div#col2 {
    float:right;
}

跨越我
abc
def
div{
边框：1px纯黑；
浮动：左；
空白：nowrap；
溢出：隐藏；
}
主分区{
宽度：200px；
}
第1课{
/*宽度：150px；*/*我不想要这个*/
}
第2部分{
浮动：对；
}

在这里拉小提琴：

---

我建议添加显示：表格单元格；到每个col div，然后指定所需的宽度。并可能尝试使用#main as display:table row；。。让我知道这是否有效。。如果没有，可能需要删除浮点属性。

请参阅：

div {
    border: 1px solid black
}
.main {
    width: 200px;
    float: left
}
.col1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.col2 {
    float: right
}

• 我改为使用类，因为您有两次

  #col2

  。ID应该是唯一的
• 我不得不在HTML中将

  .col1

  移动到

  .col2

  之后。我希望你不介意
• 这个答案适用于IE7+和所有现代浏览器
• 我添加了

  文本溢出：省略号

  以保持整洁。如果您不喜欢，请将其删除

CSS:

div {
    border: 1px solid black
}
.main {
    width: 200px;
    float: left
}
.col1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.col2 {
    float: right
}

HTML:

abc
def
跨越我

将第二个和第三个div放入第一个（col1）div中

此外，您不能为两个元素提供相同的id，尽管这可能是您的问题中的输入错误，而不是您可以用来实现所需的代码

请参见：

div {
    border: 1px solid black
}
.main {
    width: 200px;
    float: left
}
.col1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
.col2 {
    float: right
}

请注意，这是由旧浏览器（或当前版本的Opera）实现的

---

它的

溢出：隐藏不重叠…
id
应该是唯一的，请使用
class
。当您想要限制元素的宽度时，必须设置宽度。我不知道这个
文本溢出：省略号
（即使
vim
语法highlighter也不知道；工作起来很有魅力！