填充剩餘的水平空間（或最大寬度），敷在最小寬度

Question

#fit和#wrap示出了兩個不同的行爲，我想爲一個元件根據情況。元素應該像#fit如果有空間，但應該像#wrap如果沒有足夠的空間。

http://jsfiddle.net/benstenson/dN8VJ/

<div id="print"> 
    Printable 
</div> 
<div id="fit"> 
    Looks good on same line 
</div> 
<div id="wrap"> 
    Looks good on new line 
</div> 

CSS

body{overflow:hidden;padding:1em;} 
div 
{ 
    /*display:inline-block;*/ 
    float:left; 
    height:1in; 
    margin:.5em;text-align:center;line-height:1in; 
    white-space:nowrap;box-shadow:0 0 .5em gray; 
} 
#print 
{ 
    width:5in; 
    background-color:black; color:white; 
} 
#fit 
{ 
    /* when on same line 
     Size to min-width 
     OR fill remaining space 
     (like flexible box style). 
     Either way is fine. 
    */ 
    min-width:3in; 
    background-color:gold; 
} 
#wrap 
{ 
    /* when wrapped to next line */ 
    /* fill 100% OR to max width */ 
    width:100%; 
    min-width:3in; 
    max-width:5in; 
    background-color:orange; 
} 

Answer 1

什麼你要找的是 Flexbox的，但支持Flexbox的大多數瀏覽器不支持包裝。那些做的是IE10，Chrome和Opera。

http://codepen.io/cimmanon/pen/lqrGB

<div class="container"> 
    <div id="print"> 
    Printable 
    </div> 
    <div id="either"> 
    Looks good on either line 
    </div> 
</div> 

.container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
@supports (flex-wrap: wrap) { 
    .container { 
    display: flex; 
    } 
} 
.container div { 
    height: 1in; 
    margin: .5em; 
    text-align: center; 
    line-height: 1in; 
    white-space: nowrap; 
    box-shadow: 0 0 .5em gray; 
} 

#print { 
    /*-webkit-flex: 1 5in; 
    -ms-flex: 1 5in; 
    flex: 1 5in;*/ 
    width: 5in; 
    background-color: black; 
    color: white; 
} 

#either { 
    -webkit-flex: 1 3in; 
    -ms-flex: 1 3in; 
    flex: 1 3in; 
    max-width: 5in; 
    background-color: gold; 
} 

Answer 2

假設我理解正確你的問題，我想你可以達到你想要什麼inline-block。

你需要把你的內容在一個段落內部的div裏面，像這樣：

<div class="wrap-or-fit"> 
    <p>This is where your content goes.</p> 
</div> 

然後，只需設置段落min-width和max-width性能，以及display:inline-block。

.wrap-or-fit > p { 
    max-width:5in; 
    min-width:3in; 
    display:inline-block; 
    ... 
} 

如果內容適合寬度小於3英寸的單行，容器將擴展至少3英寸。如果內容寬於5英寸，則它被迫包裹在恰好5英寸的容器內。

如果含量3和5英寸之間，該容器寬度的內容寬度匹配。我不確定這是否是你想要的，但這可能是你能做的最好的。

你可以看到顯示窄體和寬含量的樣品，和造型更緊密地匹配this codepen你原來的例子擴展的例子。