Css Fluid Layout mit festen und ansprechenden Elementen

Question

Ich habe dieses Layout:

<div id="wrapper"> 
    <div class="prev"></div> 
    <div class="pause"></div> 
    <div class="seekbar"></div> 
    <div class="next"></div> 
    <div class="volume"></div> 
</div> 

https://jsfiddle.net/a9vvckwd/1/

Lassen und rechte divs und feste Größe, während div in der Mitte reagiert.

Wie kann ich dies machen, wenn ich eine der festen Divs links oder rechts des responsiven div löschen, wird dieser responsive div erweitert, um die Größe des Wrappers zu füllen?

(mit nur CSS, Cross-Browser)

Thank you!

Answer 1

display:flex und flex-grow: 1; kann es tun.

Geben display: flex;-#wrapper und .seekbar zu flex-grow: 1;

#wrapper { 
 
    position: relative; 
 
    min-width: 300px; 
 
    max-width: 600px; 
 
    height: 40px; 
 
    display: flex; 
 
} 
 
.prev { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: red; 
 
} 
 
.pause { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #ba7; 
 
} 
 
.seekbar { 
 
    height: 40px; 
 
    flex-grow: 1; 
 
    background: green; 
 
} 
 
.next { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: blue; 
 
} 
 
.volume { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #ad3; 
 
}

<div id="wrapper"> 
 

 
    <div class="prev"></div> 
 

 
    <div class="pause"></div> 
 

 
    <div class="seekbar"></div> 
 

 
    <div class="next"></div> 
 

 
    <div class="volume"></div> 
 

 
</div>

Answer 2

Verwenden Sie eine Kombination aus display: table und table-layout: fixed und stellen Sie feste Breiten für die nicht-flüssigen Divs ein.

Dies funktioniert in IE8 + und allen echten Browsern.

#wrapper { 
 
    position: relative; 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    min-width: 300px; 
 
    max-width: 600px; 
 
    height: 40px; 
 
} 
 

 
#wrapper > div { 
 
    display: table-cell; 
 
} 
 
.prev { 
 
    width: 40px; 
 
    background: red; 
 
} 
 
.pause { 
 
    width: 40px; 
 
    background: #ba7; 
 
} 
 
.seekbar { 
 
    background: green; 
 
} 
 
.next { 
 
    width: 40px; 
 
    background: blue; 
 
} 
 
.volume { 
 
    width: 40px; 
 
    background: #ad3; 
 
}

<div id="wrapper"> 
 

 
    <div class="prev"></div> 
 

 
    <div class="pause"></div> 
 

 
    <div class="seekbar"></div> 
 

 
    <div class="next"></div> 
 

 
    <div class="volume"></div> 
 

 
</div>

Answer 3

Flexbox kann das tun.

.wrapper { 
 
    position: relative; 
 
    min-width: 300px; 
 
    max-width: 600px; 
 
    height: 40px; 
 
    display: flex; 
 
    margin-bottom: 10px; 
 
} 
 
.prev { 
 
    flex: 0 0 40px; 
 
    background: red; 
 
} 
 
.pause { 
 
    flex: 0 0 40px; 
 
    background: #ba7; 
 
} 
 
.seekbar { 
 
    flex: 1; 
 
    background: green; 
 
} 
 
.next { 
 
    flex: 0 0 40px; 
 
    background: blue; 
 
} 
 
.volume { 
 
    flex: 0 0 40px; 
 
    background: #ad3; 
 
}

<div class="wrapper"> 
 

 
    <div class="prev"></div> 
 

 
    <div class="pause"></div> 
 

 
    <div class="seekbar"></div> 
 

 
    <div class="next"></div> 
 

 
    <div class="volume"></div> 
 

 
</div> 
 

 

 
<div class="wrapper"> 
 

 
    <div class="prev"></div> 
 

 

 
    <div class="seekbar"></div> 
 

 

 
    <div class="volume"></div> 
 

 
</div>

Answer 4

you can use display:table property instead of position 

working fiddle 



    https://jsfiddle.net/a9vvckwd/3/ 

https://jsfiddle.net/a9vvckwd/3/