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 下面。我想要实现的是永远不要溢出子二并始终将其保持在右 Angular ，当没有足够的空间容纳子二时收缩子一而不是溢出子二。

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 或更低版本中没有得到很好的支持。

float 不是一个好的选择，因为您要么让一个 div 开始第二行，要么需要 overflow hidden ，在我看来这是不太吸引人的选择。

fiddle :http://jsfiddle.net/audetwebdesign/pbbEP/