如何強制一個塊容器總是取所有可用的寬度？

Question

這是我目前正在練習的HTML代碼。該CSS是不完整的，因爲我不知道該怎麼做我想做什麼：

.container { 
 
    margin: auto; 
 
    width: 700px; 
 
    border: solid blue 2px; 
 
} 
 
.container div { 
 
    padding: 10px 0; 
 
    vertical-align: top; 
 
} 
 
#orange { 
 
    background-color: coral; 
 
} 
 
#blue { 
 
    background-color: lightblue; 
 
} 
 
.container > div .content { 
 
    border: dotted black 1px; 
 
    height: 100px; 
 
    width: 250px; 
 
    margin: auto; 
 
    display: block; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div id="orange"> 
 
    <div class="content">content 
 
     <br />width: 250px</div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div class="content">content 
 
     <br />width: 250px</div> 
 
    </div> 
 
</div>

當容器足夠大，橙色和藍色塊應該並肩而立，像這樣：

如果我減少了容器的寬度，橙色和藍色塊內的水平差將縮小，直到他們的邊界滿足內容的伯德R：

這裏是我想要得到什麼，當我減少多一點的容器寬度：

有誰知道如何做到這一點？ 如果可能，沒有JS。容器不依賴於屏幕大小，所以我不能使用基於設備寬度的媒體查詢。 而且，當然，解決方案必須與儘可能多的網絡瀏覽器（包括最新版本的IE）兼容。

編輯： 我使用flexbox，但我希望我能找到沒有辦法解決考慮。 順便說一句，我會感興趣的方式是在CSS代碼中編寫僅適用於IE9及以下版本的特定規則。

EDIT2： 這似乎是不可能做什麼，我想有以下限制：

• 沒有JS
• 的屏幕尺寸沒有條件，但對容器的大小，而不是

所以我想我將不得不放棄這些中的至少一個...

Answer 1

物權法將inline-block添加到需要並排的兩個框中，並且塊元素將按您的喜好行爲（始終使用所有可用寬度），因爲這是塊元素的默認行爲。

.container { 
 
    margin: auto; 
 
    font-size: 0; 
 
    width: 700px; 
 
} 
 
.container div { 
 
    padding: 10px 0; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    font-size: 1rem; 
 
} 
 
#orange { background-color: coral; } 
 
#blue { background-color: lightblue; } 
 

 
.container > div .content { 
 
    border: dotted black 1px; 
 
    height: 100px;  
 
    width: 250px; 
 
    margin: auto; 
 
    display: block; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <div id="orange"> 
 
    <div class="content">content<br />width: 250px</div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div class="content">content<br />width: 250px</div> 
 
    </div> 
 
</div>

儘管在與塊行爲的文本流inline-block的運行，你需要避免的框之間的空格。這就是爲什麼我在容器中設置了font-size:0，並在內部框中重新設置font-size: 1rem以實現此目的。

Answer 2

使用flexbox的解決方案。

如果你希望有專門針對IE9的風格及以下，有2個選項：

1. 有特定於IE 9及以下單獨的樣式表（.css文件），在HTML中引用它 - Target IE9 Only via CSS

2. 編輯CSS這樣 - https://css-tricks.com/snippets/css/browser-specific-hacks

.container { 
 
    display: flex; 
 
    background-color: green; 
 
    justify-content: space-around; 
 
    padding: 10px; 
 
} 
 
#orange { 
 
    background-color: coral; 
 
    height: 100px; 
 
    min-width: 250px; 
 
    text-align: center; 
 
    margin: 5px; 
 
} 
 
#blue { 
 
    background-color: lightblue; 
 
    height: 100px; 
 
    min-width: 250px; 
 
    text-align: center; 
 
    margin: 5px; 
 
} 
 
@media (max-width: 500px) { 
 
    .container { 
 
    flex-flow: row wrap; 
 
    } 
 
}

<div class="container"> 
 
    <div id="orange"> 
 
    <div class="content"> 
 
     content 
 
     <br/>width: 250px 
 
    </div> 
 
    </div> 
 
    <div id="blue"> 
 
    <div class="content"> 
 
     content 
 
     <br/>width: 250px 
 
    </div> 
 
    </div> 
 
</div>