css - 如何防止提供空白的边距在换行后使内联 block 父元素变为全 Angular ？

Question

如果你看的话会更容易。调整窗口的宽度:

.outer {
  background:red;
  display: inline-block;
}
.inner-1 {
  display:inline-block;
  height: 50px;
  width:250px;
  background:green;
  margin-right:50px;
}
.inner-2 {
  display:inline-block;
  height: 50px;
  width:250px;
  background:blue;
}

<div class="outer">
    <div class="inner-1"></div>
    <div class="inner-2"></div>
</div>

基本上，只要蓝色框包裹住红色框，它就会收缩以适合。但是红色框继续表现得好像蓝色框在第一行一样。

我可以通过媒体查询到达那里，但即使那是一个猜谜游戏，因为我不知道为什么它首先要这样做。

Answer 1

请提供显示您的目标的图片。

但是如果你想让蓝框在小屏幕上全宽，在媒体查询上你应该添加这段代码:

.inner-2 {
  width: 100%;
  display: block;  /*Optional*/
}