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

如果您的父容器缩小到小于400px，它将突破在这种情况下您无法做任何事情。如果左列需要最小宽度，则应该在父级上设置最小宽度。

强制父进行扩展以保存子内容

2 个答案: