如何控制哪些元素将改变宽度比其他更多?将流体与静态容器混合

Question

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

现在，因为我在所有字段上使用百分比，最后一个字段有一个静态的最小宽度，当接近600px父宽度时，它被移动到下一行。

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

或者如何留下最后一个字段与固定的宽度和拉伸前3?

jsFiddle联系

<div style="width: 100%; height: 50px;">
    <div style="width: 20%; height: 100%; float: left; background-color: blue; display: block">a</div>
    <div style="width: 20%; height: 100%; float: left; background-color: green; display: block">b</div>
    <div style="width: 20%; height: 100%; float: left; background-color: blue; display: block">c</div>
    <div style="width: 40%; min-width: 280px; height: 100%; float: left; display: block;">
        <div style="width: 50%; height: 100%; float: left; background-color: yellow;">d</div>
        <div style="width: 50%; height: 100%; float: left; background-color: orange;">e</div>
    </div>
</div>

Answer 1

这是flexbox的完美场景。这是我的看法:http://jsfiddle.net/7QUY9/3/。请确保您使用的浏览器支持flexbox或仅使用最新版本的Chrome。

在我的书《功能性CSS》中，我在最后一种情况下考虑了更多的flexbox:导航菜单。这本书将在未来1.5天内在amazon上免费提供。如果你需要的话，欢迎你去看看。

确保调整jsfiddle预览窗口的大小，以查看flexx的作用。伟大的规范。

下面是HTML代码:

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

这里是CSS:

#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;
}

Answer 2

嗯，我在谷歌上搜索了一下，同时我抓耳挠脑，找到了这个解决方案。

这是jsFiddle

但这是跨浏览器兼容和支持的浏览器几代旧?

<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>