css - 强制父级扩展以保存子级内容

Question

http://jsfiddle.net/w9E4K/7/

<div id="parent">
<div id="left">Left</div>
<div id="right">Right</div>
</div>​

#left {
    display: inline-block;
    width: 75%;
    background-color: blue;
}

#right {
    display: inline-block;
    width: 25%;
    min-width: 100px;
    background-color: red;
}

#parent {
    overflow: auto;
}

​我有两个 div，我正在尝试布局，一个是屏幕的 3/4，另一个是 1/4。但是，如果屏幕太小，我需要设置最小宽度以防止元素移动。

我想知道如何用 CSS 来表达这一点？这个想法是右侧 div 至少需要 100px 并导致父 div 扩大以容纳它。

如果这有帮助，我可以换成使用浮点数而不是内联块。

Answer 1

#left {
  overflow: hidden;
  background-color: blue;
}

#right {
  float: right;
  width: 25%;
  min-width: 100px;
  background-color: red;
  margin-top: 5px; // only used to see the left div
                   // actually ending next to the right div
}

和：

<div id="parent">
  <div id="right">Right</div>
  <div id="left">Left</div>
</div>

演示：http: //jsbin.com/akamik/1/

Answer 2

如果你的父容器缩小到小于 400 像素，它就会崩溃，在这种情况下你无能为力。如果您需要左列的最小宽度，您可能应该在父列上设置最小宽度。