CSS 内联块方案 - 全部折叠或不折叠

Question

>我有如下情况：

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

您需要两件事之一：

• 所有三个元素都内联在同一行上
• 如果宽度为 2 小，所有三个元素都
堆叠在一起

使用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 中应用任何新的显示属性以确保它达到堆叠，您可以使用显示亚麻属性。

请阅读这篇文章。希望对您有所帮助。 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;
}