如果左右 div 靠得太近，如何将中间 div 向下移动？

Question

我有 3 个 div 元素。 [左] [中] [右]

如果 [left] 和 [right] 继续靠近，因为它们即将触及中心 div，中心 div 应该向下移动，如图所示下图。

[左]_______[右]

   [center]

我已经试够了，但没能达到这个位置。我相信这不是一个新概念。我尝试了 flex-box 但无法实现所需的行为。我将不胜感激任何帮助。谢谢。

Answer 1

为了说明我关于问题中缺乏信息的观点，这里有一个解决方案完全符合您的要求，但无助于解决您的问题。请提供更多上下文。

div {line-height:3em; text-align:center}
.left, .right {width:200px; max-width:calc(50% - 2px); float:left; border:1px solid; overflow:hidden}
.right {float:right}

<div class="left">This is the left div</div>
<div class="right">This is the right div</div>
<div class="middle">This is the center div</div>

如果左右 div 靠得太近，如何将中间 div 向下移动？

How to move the middle div down if the left and right div come too close to each other?

html

css

margin

css-position

flexbox