Html 如何使用固定和弹性CSS内容

我尝试使用固定宽度和有弹性的CSS内容，类似于在上看到的内容。我假设使用min width和max width可以很容易地实现这一点，但是我遇到了子元素的问题，这些子元素只是坚持它们的最小宽度，而不是拉伸到最大宽度

---

可以看到一个演示。

您实际上不需要设置最小/最大宽度

---

问题基本上是

float:left在stretch-1上。你只需要在固定尺寸的零件上使用它。它的基本意思是：“我现在在左边，其他一切都占据了右边的空间。”。具有float属性的div尝试占用尽可能少的空间，以便其余部分可以拉伸。
从
#stretch-1
中删除
float:left
 您实际上是在尝试创建包含固定宽度元素的流畅布局，您需要在所有父元素上设置百分比宽度，以便使其与google日历一样工作-将css更改为以下内容

#container {
max-width:1280px;
min-width:260px;
    width:90%;
height:200px;
margin:auto;
background:#000;
}

#fixed-1 {
width:200px;
height:200px;
float:left;
background:#3fb44a;
}

#stretch-1 {
min-width:60px;
    width:20%;
height:200px;
float:left;
background:#c44d58;
}

#sub-content {
width:100%;
height:20px;
background:#4788ef;
}

​
 那把小提琴没有按预期的那样用。。。粉红色区域应该会填满剩余的黑色空间，同时仍然坐在绿色框旁边。我现在看到，如果您不想为流体框设置特定的宽度，并让它占据所有空间（更新的小提琴），您还知道如何停止流体框的背景色，您需要省略左侧的浮动并将宽度设置为“自动”吗子内容的行为是否奇怪？它似乎跨越了容器的整个宽度。对，我还没意识到。看起来像是溢出：自动在stretch-1上执行。不幸的是，我真的无法解释原因。也许你必须用不同的浏览器来测试它（）。顺便说一下，如果您希望子内容只占用所需的空间，请将其从
更改为
。在所有最新的浏览器中，它似乎都可以正常工作，不过稍后我将不得不对其进行更多测试。再次感谢！