CSS内联块场景-全部折叠或全部折叠[重复]

Question

我有这样一个场景：

你有三个内联元素，两个本质上是一样的，但是中间的那个不是，它的宽度总是未知的。

你想要两件事：

• 所有三个元素都内联在同一行中
• 如果宽度是两个 很小，所有三个元素都堆叠在一起

使用 display: inline-element，它会根据需要折叠，这意味着在一定宽度上，两个元素将在顶部，一个在底部。这不是任何期望的条件。

    .div-a {
      background-color: red;
    }
    
    .div-b {
      background-color: blue;
    }
    
    div {
      display: inline-block;
      font-size: 4em;
    }

    <div class="div-a">
     L
    </div>
    <div class="div-b">
     Mid
    </div>
    <div class="div-a">
     R
    </div>

我们如何确保所有块都是堆叠的，或者它们都是内联的？请记住，中间元素的宽度总是未知的。

编辑：不知道为什么这被标记为重复，因为我什至没有询问媒体查询调整大小，这只是解决方案之一。

Answer 1

这取决于您的视口和元素宽度。当您将显示内联元素放在 div 中时，所有 div 都将被视为内联元素。直到您在任何特定的 div 中应用任何新的显示属性。为确保堆叠，您可以使用 display flax 属性。

请阅读这篇文章。希望它会帮助你。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

使用 display flex 保持在一行并动态管理宽度中间元素

<div class="a">
<div class="div-a">
L
</div>
<div class="div-b">
Midghghghghchcghgdc
</div>
<div class="div-a">
 R
</div>
</div>

css

    .a {
  display:flex;
}
.div-a {
  background-color: red;
}

.div-b {
  background-color: blue;
}

div {
  display: inline-block;
  font-size: 2em;
}