CSS 3 Div 在同一行 - ! Fix With - 其他两个是百分比明智的

Question

我有三个 div，我已经设置了 float left。所以现在所有人都在同一条线上。

分区 01 -

Div 02 - 固定宽度

第 03 部分 -

Div 02 应为 300 像素。其他 div 应该相同。

例如:

如果视口(viewport)为 1000px，Div 01 width=350px 和 Div 03 width=350px，

如果视口(viewport)为 800px，Div 01 宽度 = 250px，Div 03 宽度 =250px。

有没有办法在没有媒体要求的情况下做到这一点？很难为每个视点编写媒体查询。

Answer 1

一个好的方法是使用 flexbox。

HTML:

<div class="flex-container">
    <div class="flex-item">left</div>
    <div class="middle">middle</div>
    <div class="flex-item">right</div>
</div>

CSS

.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.flex-item {
    background:red;
    flex: 1 auto;
}
.middle {
    background:blue;
    width: 300px;
}

这是我的代码笔:https://codepen.io/jennift/pen/vKBEwY