如何创建跨越 3 个垂直 div 元素的徽标图像答案

【问题标题】：How to create a logo image that spans 3 vertical div elements如何创建跨越 3 个垂直 div 元素的徽标图像
【发布时间】：2021-05-19 21:35:08
【问题描述】：

如何创建一个布局，允许具有跨越 3 个垂直 div 元素的徽标图像（黄色）并且在页面最小化时不改变其位置（中心）。我正在使用 Bootstrap 4。最初，我找到了 2 个解决方案，但是当通过最小化页面大小来调整页面大小时它们不起作用。

使用 CSS 样式 position: absolute 和 topY/offset - 不起作用，因为徽标图像（黄色）改变了它的位置..gray div 位于 pink div 之下，因此徽标图像与 gray 的 div 文本内容重叠
将logo图片水平分割成3张图片，问题是最小化页面时第二张（中间）图片和底部图片之间出现了很大的空间

注意：当页面最小化时，灰色 div在粉红色 div下方，绿色 > div 位于 gray div 之下，因此，第二行高出一倍。它高一倍没问题，但我希望徽标（黄色）在其原始 pink div

中保持垂直居中

【问题讨论】：

标签： html css layout bootstrap-4

【解决方案1】：

您需要在徽标上使用position: absolute、top: 50% 和transform: translateY(-50%) 才能使其工作

首先，position: absolute 和 top: 50% 将使徽标位置固定在其相对父级中，并使徽标本身的顶部位于其父级的中心

然后transform: translateY(-50%) 会将标志从当前位置负向移动标志高度的一半

这是工作示例

.c1 {
  background: pink;
  overflow: visible;
}
.c2 {
  background: gray;
}
.c3 {
  background: lightblue;
}
.logo {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-fluid'>
  <div class='row'>
    <div class='col-md-12'>
      1 DIV
    </div>
  </div>
  <div class='row'>
    <div class='col-md-4 c1'>
      Left Content Logo
      <img class='logo' src='https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png' />
    </div>
    <div class='col-md-3 c2'>
      Mid Content
    </div>
    <div class='col-md-5 c3'>
      Right Content
    </div>
  </div>
  <div class='row'>
    <div class='col-md-3' style='background: blue;'>
      LEFT
    </div>
    <div class='col-md-6'>
      MID
    </div>
    <div class='col-md-3'>
      RIGHT
    </div>
  </div>
</div>

注意：您可以尝试调整 div 或 logo 的大小，以查看它仍会在其相对父容器中居中

【讨论】：

它使用了完全相同的解决方案（位置：绝对，顶部：50% 和变换：translateY(-50%) 和 z-index），结果完全相同:)。结果，当页面最小化时，c2“Mid Content”的内容位于徽标图像下方。一种解决方案是使用 jQuery（如 ResizeSensor）并增加 c2（灰色）的高度或 c1（粉红色）的高度
决定在宽度小于900px时暂时隐藏logo，已在您的评论stackoverflow.com/a/23946351/502332找到解决方案
@Igor 对不起，如果结果相同，因为你的笔记上写着No problem that it is twice taller, but I want that the logo(yellow) to stay vertically centered in its original pink div。如果您的布局必须在所有设备宽度上保持不变，我认为使用引导程序是不可能的，因为引导程序中使用了媒体查询，当它达到某个特定值时，它会将布局从第 4/12 列（33.33% 宽度）更改为 100% 宽度宽度，将 c2 列移到 c1 列下方
要么通过在HTML 中设置meta viewport 标签来保持布局与this 相同，要么在CSS 中设置body 的最小宽度，或者设计一个移动视图中徽标的新布局或在宽度小于900px 时向c2 添加一些额外的padding-top，以便徽标不会与内容重叠而不是隐藏徽标

【解决方案2】：

这可以通过margin: negativevalue 0 实现——但如果没有实际代码，我无法给出准确的值。如果是标准 Bootstrap 4，将类 my-n5（利用 Bootstrap 4's spacing utility）添加到 logo 元素将使其盒子模型与其他元素重叠。

【讨论】：

【解决方案3】：

将 3 个 div 放在一个包装器中

    <style>
        .wrapper{
        background-image:url("image.jpg");
        background-size:cover;
        }
   </style>  
  
  <div class="wrapper">
    // three divs go here
    </div>

【讨论】：