同じラインのCSS 3 Div - ！修正済み - 他の2つはパーセンテージです

Question

私は3つのdivを持ち、フロートを左に設定しました。だから今はすべて同じラインに入っている。

本部01 -

本部02から300ピクセルあるべき

本部02 - 幅

事業部03を固定してください。他のdivは同じでなければなりません。

例：

ビューポートが= 250ピクセル800ピクセル、統括部01の幅と本部03幅= 250ピクセルである場合、ビューポートは1000px、本部01幅= 350pxと= 350px、

事業部03の幅である場合。

メディアがなくてもこれを行う方法はありますか？すべての視点のメディアクエリーを作成するのは難しいです。

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

は、ここに私のcodepenです：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>