Html 如何控制哪些元素的宽度变化大于其他元素？使用静态容器在线混合液体

我正在创建一个流体设计，其中我需要放置4个内联字段。前3个字段的宽度各为20%，第4个字段的宽度为40%和/或最小值为280px左右，并将分成2个单独的字段。这是因为280px字段将包含一个拆分为单独按钮的背景图像

现在，由于我在所有字段上使用百分比，并且最后一个字段有一个静态最小宽度，所以当接近600px父宽度时，它将被移动到下一行

我如何确保我的元素保持在原位，并强制前3个元素比最后一个压缩更多

或者如何以固定宽度离开最后一个字段并拉伸前3个字段

A.
B
C
D
E

好吧，在我搔搔头的时候，我在谷歌上搜索了一下，然后就醒了过来

这是

但是这种跨浏览器兼容并且在几代以前的浏览器中受支持吗

<div style="width: 100%; height: 50px;">
    <div style="width: 100%; height: 100%; float: left; margin-right: -280px; padding-right: 269px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
        <div style="width: 33%; height: 100%; float: left; background-color: blue;">a</div>
        <div style="width: 33%; height: 100%; float: left; background-color: green;">b</div>
        <div style="width: 33%; height: 100%; float: left; background-color: blue;">c</div>
    </div>
    <div style="width: 280px; height: 100%; float: right; display: block;">
        <div style="width: 50%; height: 100%; float: left; background-color: red;">d</div>
        <div style="width: 50%; height: 100%; float: left; background-color: orange;">e</div>
    </div>
</div>

A.
B
C
D
E

这是flexbox的完美场景。以下是我对它的看法：。确保您使用的浏览器支持flexbox，或者只使用最新版本的Chrome

在我的《功能CSS》中，在接下来的1.5天里，Amazon可以免费下载，我在最后一个案例中考虑了更多的Frasbox：导航菜单。如果你想的话，欢迎你来看看

确保调整JSFIDLE预览窗口的大小以查看flexbox的运行情况。很好的规格

以下是HTML代码：

<div id = "main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>
        <div>4a</div>
        <div>4b</div>
    </div>
</div>

---

还有一条评论。请使用单独的样式表。内联样式更难阅读。你说得对，DRD。我抓到这个例子的速度太快了，没有想到这一点：潘下载了这本书。我需要它，哈哈哈。喜欢这本书。

<div id = "main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>
        <div>4a</div>
        <div>4b</div>
    </div>
</div>

#main {
    height: 20px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#main > div:nth-of-type(-n + 3) {
    -webkit-flex: 1 1 140px;
    flex: 1 1 140px;
    outline: 1px dashed red;
}

#main > div:nth-of-type(4) {
    -webkit-flex: 2 0 280px;
    flex: 2 0 280px;
    outline: 1px dashed red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#main > div:nth-of-type(4) > div {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
    outline: 1px dotted blue;
}