CSS 3 Div in der gleichen Zeile -! Fix mit - Andere zwei sind prozentual

Question

Ich habe drei divs und ich habe float links gesetzt. Also sind alle in derselben Linie.

Div 01 -

Div 02 - Fix Breite

Div 03 -

02 Div 300 px sein sollte. Andere Divs sollten gleich sein.

Ex:

Wenn Ansichtsfenster ist 1000px, Div 01 width = 350px und Div 03 width = 350px,

Wenn Ansichtsfenster ist 800px, 01 Div width = 250px und 03 Div width = 250px.

Gibt es eine Möglichkeit, dies ohne Medienanforderungen zu tun? Es ist schwierig, Medienabfragen für jeden Standpunkt zu schreiben.

Answer 1

wird ein guter Weg sein Flexbox zu verwenden.

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

Hier ist mein codepen: https://codepen.io/jennift/pen/vKBEwY

Answer 2

So viele Möglichkeiten. Wie wäre es, einfach die Breite explizit festzulegen?

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>

Eine andere Möglichkeit ist es, einen Tisch zu verwenden.

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

Oder flex-Boxen.

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