html - 空间不足时如何开始缩小同级 div

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 的大小时，它们开始缩小。一旦没有足够的空间容纳固定宽度的子 2，它就会溢出到子 1 的下方。我想要实现的是永远不要溢出孩子二并始终将其保持在右上角，当孩子二没有足够的空间时缩小孩子一而不是溢出孩子二。

Answer 1

我尝试了以下方法：

<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/

Answer 2

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

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

演示

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

Answer 3

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

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

Answer 4

另外的选择：

<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 5

尝试使用花车；而不是内联块。我想这就是你在http://jsfiddle.net/cVH9G/3/之后的样子

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

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

相关的 css 如下所示：

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