html - 如果左右 div 彼此靠得太近,如何将中间的 div 向下移动?

标签 html css flexbox css-position margin

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

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

[左] _______ [右]

   [center]

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

最佳答案

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

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>

关于html - 如果左右 div 彼此靠得太近,如何将中间的 div 向下移动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40182269/

相关文章:

javascript - 带有 jQ​​uery 和 textarea 的动态 if/else 语句

javascript - 无法在移动设备上的输入字段中输入文本,但可以在桌面上使用

css - 更改悬停背景的 z-index

css - 具有百分比宽度但固定边距的 Flexbox

css - 如何使 Flexbox 元素大小相同

html - 没有内容的绝对定位 div 上的框阴影?

css - font-awesome 是否用于提供商业网络字体?

javascript - 变量似乎没有在移动设备上设置

html - Github页面404找不到文件

css - 表格单元格内的垂直间距