Question

您好我关注HTML：

<div>  
    <div style="display:inline-block;">
        Child one **************************************
    </div>

     <div style="display: inline-block;width: 100px;">
         Child two
    </div>  
</div>

http://jsfiddle.net/cVH9G/

当我调整浏览器大小时，父div开始收缩。一旦固定宽度的孩子没有足够的空间，它就会溢出孩子的下方。我想要实现的目标是永远不要让孩子二过来并且总是把它放在右下角，当孩子没有足够的空间时，两个孩子就会收缩，而不是让孩子两个人满溢。

Answer 1

您可以尝试为您的父div提供min-width：

<div style="border:3px solid red;min-width: 500px;">

<强> Demo

这将确保您的父div始终显示为至少500px的最小宽度，并且当用户调整浏览器的范围时，将创建一个水平滚动条。

Answer 2

工作小提琴： http://jsfiddle.net/cVH9G/5/（已更新改进）

第一个孩子按屏幕宽度调整大小，第二个孩子保持在右侧，宽度始终为100px。

Answer 3

另一种选择：

<div style="border:3px solid red; ">
    <div style="border: 1px solid gold; display: inline-block; width: 20%; float:right;">
         Child two
    </div>   
    <div style="border: 1px solid green; display:inline-block; width: 75%; word-break: break-all;">
        Child one **************************************
    </div>
</div>

Answer 4

尝试使用花车;而不是内联块。我认为这就是你http://jsfiddle.net/cVH9G/3/

之后的情况

请注意，我还在您的包装器中添加了overflow:hidden，以防止它崩溃（clearfix）。

另请注意，我改变了孩子的顺序，使child2保持在右上方，即使父母缩小了。

相关的css看起来像这样：

#child1 {
    display: block;
    float: left;    
}
#child2 {
    width: 100px;
    display: block;
    float: right;
}

Answer 5

我尝试了以下内容：

<div class="wrapper">
    <div class="child-one">Child one **************************************</div>
    <div class="child-two">Child two</div>
</div>

使用以下CSS：

.wrapper {
    position: relative;
    border: 2px solid red;
    overflow: auto;
}
.child-one {
    margin-right: 110px;
}
.child-two {
    position: absolute;
    right:0;
    top: 0;
    border: 1px solid gold;
    width: 100px;
}

您可以使用绝对定位来保持child-two到位。

table-cell也如前所示，但在IE7或更低版本中得不到很好的支持。

浮动不是一个好选择，因为你要么得到一个div开始第二行，要么隐藏溢出，在我看来不太吸引人的选择。

小提琴：hthttp：//jsfiddle.net/audetwebdesign/pbbEP/

如果没有足够的空间，如何开始缩小兄弟div

5 个答案: