时间戳

首页 > 解决方案 > CSS inline-block 场景 - 全部折叠或全部折叠

html - CSS inline-block 场景 - 全部折叠或全部折叠

问题描述

我有一个特定的场景，如下所示：

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

你想要两件事：

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

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

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

标签： htmlcssflexboxdisplay

解决方案

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

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

推荐阅读