流體半流體div

Question

 .mid{ margin:0 auto; max-width:10em; min-width:5em; border:1px solid red; } 

 <div class='mid'>...</div> 

這段代碼創建了一個居中的div，如果瀏覽器窗口足夠小，該div可以擴展到10em，並縮小到5em。 幾乎我想要的。

是否可以連續創建三個div，中間div的行為完全類似於.mid（擴展到10em，縮小到5em），左右div的行為就像auto的邊距：擴展到居中的.mid，如果縮小到0空間不足。

我找到的最接近的解決方案是這個 。 唯一的問題是.mid不會縮小，因為td沒有混合寬度和最大寬度。

 .cont{ display:table; /* table-layout:fixed; /* this prevented shrinking */ width:100%; } .cont div{ display:table-cell; overflow:hidden; } .mid{ width:10em; /* in table width behaves like max-width*/ border:1px solid red; } 

 <div class='cont'> <div>left</div> <div class='mid'>...</div> <div>right</div> </div> 

我是否缺少某些東西，或者無法在html / css中創建此布局？

Answer 1

您可以使用flex屬性： http : //jsfiddle.net/7v1m5g8d/1/

 .cont { display:flex; width:100%; border:1px solid blue; text-align:center; } .cont div { flex:1; } .cont div.mid { /* strippes for demo */ background:repeating-linear-gradient(to right, transparent 0, transparent 0.9em, gray 0.9em, gray 1em); min-width:5em; max-width:10em; flex:auto;/* reset */ border:1px solid red; } /* do not forget to add prefix-vendor if needed or a script as prefixfree.js :) */ 

 <div class='cont'> <div>left</div> <div class='mid'>...</div> <div>right</div> </div>