CSS 3 div 在同一行 - ！修复方式 - 其他两个是百分比明智的

Question

我有三个div，我已经设置了浮点数。所以现在都在同一行。

十一区 -

Div 02 - 固定宽度

三奖 -

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

前任：

如果视口为 1000px，则 Div 01 宽度 = 350px

和 Div 03 宽度 = 350px，

如果视口为 800px，则 01 区宽度 = 250px，分区 03 宽度 = 250px。

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

Answer 1

一个好方法是使用弹性框。

.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

Answer 2

这么多方法。如何简单地明确设置宽度。

div {float:left}
div:nth-child(odd) {background:#EE9; width:calc(50% - 150px);}
div:nth-child(even) {background:#9EE; width:300px;}

<div>left</div>
<div>middle</div>
<div>right</div>

另一种方法是使用表。

.table {display:table; border-spacing:0; width:100%}
.row {display:table-row}
.cell {display:table-cell}
.cell:nth-child(odd) {background:#EE9;}
.cell:nth-child(even) {background:#9EE; width:300px;}

<div class="table">
  <div class="row">
    <div class="cell">left</div>
    <div class="cell">middle</div>
    <div class="cell">right</div>
  </div>
</div>
    

或者，弹性框。

.container {display:flex; width:100%; flex-basis:fill}
.container :nth-child(odd) {background:#EE9; flex-basis:fill; flex-grow:1}
.container :nth-child(even) {background:#9EE;  flex-basis:300px}

<div class="container">
  <div>left</div>
  <div>middle</div>
  <div>right</div>
</div>