0

这是我的例子 - http://jsfiddle.net/xcSvD/

HTML：

<div id="parent" >
  <div id = "child1"></div>
  <div id = "child2"></div>
<div>

CSS：

    #parent {
        width: 200px;
        height: 30px;
        border: 1px solid black;
        overflow:hidden;


}

    #child1 {
        height:100%;
        width:100px;
        float:left;
        border: 1px solid green;
        overflow:hidden;
    }

     #child2 {
         height:100%;
         overflow:hidden;
         width:95px; 
         /*width:105px;*/
         float:left;
         border: 1px solid red;
    }

如您所见，有两个 div，每个都有样式“溢出：隐藏”。案例1：当div的宽度总和不超过父宽度（100+95 < 200）时，一切正常，两个div相互靠近。情况2：当div的宽度总和超过父宽度（100+105 > 200）时，最新的div移到下一行。我怎样才能使案例 2 中的最后一个 div 占用所有剩余空间（200 - 100）而不是移动到下一行？

4

3 回答 3

1

在这种情况 Fiddle下，第二个 div 永远不会宽于 105px，但如果父级很小，则第二个 div 只跨越到末尾。

#child2
{
    height:100%;
    max-width: 105px; /*max width of 105px*/
    border: 1px solid red;
    overflow: auto; /*important*/
}
于 2013-09-29T10:59:16.407 回答
0

看看这个工作小提琴

#parent {
    width: 200px;
    height: 30px;
    border: 1px solid black;
}
#child1 {
    height:100%;
    width:100px;
    float: left;
    border: 1px solid green;
}
#child2 {
    height:100%;
    border: 1px solid red;
}

第一个 div 的流向左，第二个 div 是一个常规的块元素，所以他占据了剩余的空间。

我删除了，overflow:hidden;但你可以把它放回去。。

编辑：

在这个新的Fiddle中，第二个 div 永远不会比 105px 更宽，但如果父级很小，他只会跨越到最后。

#child2
{
    height:100%;
    max-width: 105px; /*max width of 105px*/
    border: 1px solid red;
    overflow: auto; /*important*/
}
于 2013-09-27T13:34:44.467 回答
0

由于您指定了 95+105+2+2 （2 和 2 是边框），因此以下内容不起作用，您可以使用 103 和 93 的宽度来解决这个问题，或者只使用以下标签：

Box-sizing: Border-box

您可以将其添加到这两个子类中，请注意，此标记仅受使用 CSS3 的浏览器支持，但您可以使用各种 javascript 插件解决此问题。

#child1 {
        height:100%;
        width:100px;
        float:left;
        border: 1px solid green;
        overflow:hidden;
    }

     #child2 {
         height:100%;
         overflow:hidden;
         width:105px;
         float:left;
         border: 1px solid red;
    }
于 2013-09-27T13:42:53.900 回答