如何强制块容器始终占用所有可用宽度？

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>

当容器足够大时，橙色和蓝色块应该并排放置，如下所示：

如果我减小容器的宽度，橙色和蓝色块内的水平边距会缩小，直到它们的边框与内容的边框相交：

这是我在减小容器宽度时想要获得的结果：

有人知道怎么做吗？ 如果可能的话，不用 JS。并且容器不依赖于屏幕大小，所以我不能使用基于设备宽度的媒体查询。 当然，该解决方案必须与尽可能多的网络浏览器兼容（包括最新版本的 IE）。

编辑： 我考虑过使用flexbox，但我希望我能找到没有的解决方案。 顺便说一句，我有兴趣在 CSS 代码中编写仅适用于 IE9 及以下版本的特定规则。

编辑2： 似乎不可能通过以下限制做我想做的事：

• 没有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

使用弹性盒的解决方案。

如果您希望拥有特定于 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>