のCss流体レイアウトは

Question

私は、このレイアウトを持っている：

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

みようと右のdivと固定サイズ、真ん中のdiv要素が応答しています。

レスポンスディビジョンの固定ディビジョンを削除した場合、この応答ディビジョンが展開されて、ラッパーのサイズを満たすことができますか？

（ちょうどCSS、クロスブラウザで）

ありがとうございます！

Answer 1

display:flexとflex-grow: 1;それを行うことができます。

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

display: tableとtable-layout: fixedの組み合わせを使用し、非流動divの固定幅を設定します。

これはIE8 +とすべての実際のブラウザで動作します。

#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

フレキシボックスはそれを行うことができます。

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