Question

我有一个固定宽度的父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;
}

这里小提琴： http://jsfiddle.net/FMB2M/

Answer 1

请参阅： http://jsfiddle.net/thirtydot/FMB2M/4/

我改用了类，因为你有#col2两次。 ID应该是唯一的。
我必须在HTML中将.col1移到.col2之后。我希望你不介意。
这个答案适用于IE7 +和所有现代浏览器。
我添加了text-overflow: ellipsis以获得整洁。如果您不喜欢，请将其删除。

CSS：

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

<强> HTML：

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

Answer 2

您可以使用Flexible Box model来实现您的需求。

请参阅： http://jsfiddle.net/FMB2M/13/

请注意，旧版浏览器（或Opera的当前版本）为not supported。

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

div#main {
  width:200px; 
  display:-webkit-box;
  display:-moz-box;
  display:box;

  -webkit-box-orient:horizontal;
  -moz-box-orient:horizontal;
  box-orient:horizontal;

  -webkit-box-align:start;
  -moz-box-align:start;
  box-align:start
}

div.col1 {
  -webkit-box-flex:1;
  -moz-box-flex:1;
  box-flex:1;
  text-overflow:ellipsis
}

Answer 3

我建议添加display：table-cell;到每个col div，然后指定你需要的宽度。并且可能尝试使用#main作为display：table-row; ..让我知道这是否有效..如果没有，可能需要删除float属性。

Answer 4

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

中

此外，您不能为2个元素提供相同的ID，尽管这可能是您问题中的拼写错误而不是您的代码

最大可能尺寸的Div（跨越可用宽度的列）

4 个答案: