Question

以下是我目前正在练习的HTML代码。 CSS不完整，因为我不知道如何做我想做的事情：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

如果我减小容器的宽度，橙色和蓝色块内的水平边距将缩小，直到其边框符合内容的边框：

当我减少容器宽度时，我想要获得的是：

有谁知道怎么做？如果可能的话，没有JS。容器不依赖于屏幕大小，因此我无法根据设备宽度使用媒体查询。当然，该解决方案必须与尽可能多的Web浏览器兼容（包括最新版本的IE）。

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

EDIT2： 似乎不可能通过以下约束来做我想要的事情：

没有JS
屏幕大小没有条件，而是在容器大小上

所以我想我必须至少放弃其中一个...

Answer 1

使用flexbox的解决方案。

如果您希望获得特定于IE9及以下的样式，则有2个选项：

具有特定于IE 9及更低版本的单独样式表（.css文件），以HTML格式引用它 - Target IE9 Only via CSS
以这种方式编辑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>

Answer 2

只需将inline-block添加到需要并排的两个框中，并且块元素将按照您的喜好运行（始终采用所有可用宽度），因为这是块元素的默认行为。 / p>

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

虽然内联块使用块行为在文本流上运行，但您需要避免这些框之间的空格。这就是为什么我在容器中设置font-size:0，并在内部框中再次重置font-size: 1rem以实现此目的。

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

2 个答案: