居中的 div 比 bootstrap 和 flexbox 上的父 div 高

Posted 2023-03-29

【中文标题】居中的 div 比 bootstrap 和 flexbox 上的父 div 高

【英文标题】：Centered div with greater height than parent div on bootstrap and flexbox

【发布时间】：2020-04-19 11:49:07

【问题描述】：

我正在努力实现这一目标......

青色 div 的右侧应该是文本。

我可以使用绝对位置来做到这一点，但我找不到任何解决方案来使用引导程序和弹性盒来做到这一点。使用引导程序和“行”和“列”方式，灰色 div 的高度总是等于蓝绿色 div 的高度，但我不会那样做。

任何想法，我该怎么做？

非常感谢大家

【问题讨论】：

你能分享你的html/css吗？

【参考方案1】：

如果您不想使用absolute，或relative，或者一般不是static 定位，有一种方法可以使用负边距将一个元素置于另一个元素之上。

.background 
  background-color: #AAA;
  margin: 50px 0 0 0;
  height: 50px;


.foreground 
  background-color: blue;
  height: 150px;
  width: 150px;
  margin: -100px 0 0 50px;

<div class="background">
</div>
<div class="foreground">
</div>