具有图像重叠的 Flexbox 布局答案

【问题标题】：Flexbox Layout with image overlaps具有图像重叠的 Flexbox 布局
【发布时间】：2023-03-20 22:17:01
【问题描述】：

我在尝试复制这个时遇到了麻烦：

我似乎无法让图像占据容器宽度并与黑框重叠。我有一个工作副本，但它对移动/桌面不友好。这是 codepen 中的一个简单示例：https://codepen.io/pandar3n/pen/jQqvjm

HTML：

<div class="test-container">
  <div class="wrapper">
    <div class="test-img"><img src="https://placekitten.com/800/300" /></div>
    <div class="test-text">
      <div class="testtext-inner">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo.</p>
      </div>
    </div>
  </div>
</div>

<div class="test-container alt">
  <div class="wrapper">
    <div class="test-img"><img src="https://placekitten.com/800/300" /></div>
    <div class="test-text">
      <div class="testtext-inner">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      </div>
    </div>
  </div>

SCSS

*{
  font-family: sans-serif;
}
.test-container {
  .wrapper {
    max-width: 80vw;
    margin: 50px auto;
    position: relative;
    display: flex;
    height: 80vh;
  }
  .test-text {
    width: 50%;
    background-color: #aaa;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .testtext-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
  }

.test-img {
  width: 50%;
  align-self: center;

  img {
    transform: translateX(80px);
  }
}

&.alt {
  .test-text {
    order: 1;

    .testtext-inner {
      padding-right: 150px;
      padding-left: 50px;
    }
  }
  .test-img {
    order: 2;

    img {
      transform: translateX(-80px);
    }
  }
}
}

设法让交替布局工作，但图像不会占据左/右的空白。

60% 50% 的弹性是否可行？

【问题讨论】：

您正在使用transform() 函数将图像向右/向左移动。这会将其从容器的边缘移开，因此它可以与其同级重叠。不确定你想要什么......重叠和全宽？那么你想增加图片的大小吗？
我尝试将图像宽度设置为 100%，但它不起作用，但理想情况下它是重叠和全宽的图像。我正在考虑调整文本容器的宽度，使其看起来像全宽，但它可能会弄乱包裹网站的整个容器的宽度。 60% 50% 的弹性会起作用吗？我之前的尝试是让两个 50% 的 div 由 flex 控制，然后图像就会覆盖在上面。

标签： css flexbox

【解决方案1】：

这些值取决于图像的尺寸，但我觉得你的 CSS 过于复杂，请参阅以下示例：https://codepen.io/anon/pen/mQPvZW

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

.row {
  background: #333;
  display: flex;
  margin: 20px;

  .col {
    background: #c33;
    flex-grow: 0;
    margin: 10px;
    min-height: 400px;
    padding: 20px;
    position: relative;
    width: 60%;

    &:first-child {
      margin-right: 0;
      width: 40%;
    }

    img {
        height: 300px;
        position: absolute;
        // Adjust the indent of the image as necessary.
        // 30px calculated by 20px padding + 10px margin gutter.
        right: -30px;
        z-index: 1;

        // If you want to vertically align in the area assuming you dont know the dimensions of the image.
        top: 50%;
        transform: translateY(-50%);
      }
  }

  + .row .col {
    width: 40%;

    img {
      right: auto;
      left: -30px;
    }

    &:first-child {
      width: 60%;
    }
  }
}

下面是描述样式的图片的简短说明：

黑盒：Flex 包装器。
红框：Flex 项目（注意它们应该如何填充整个 flex 区域）。
蓝框：图像元素绝对定位在 flex 容器中。

这种方法有很多注意事项 - 主要是关于您是否知道图像的尺寸和内容区域。但根据提供的信息，我相信这是最稳定的方法。

【讨论】：

干杯！这看起来很有希望！

【解决方案2】：

更新：我设法让它以某种方式与 flexbox 一起工作，在这种情况下，我必须将 div 覆盖在另一个之上才能发生重叠。

HTML：

<div class="block">
  <div class="image-wrapper">
  <img src="https://placekitten.com/600/400"/>
</div>
  <div class="div-wrapper">
  <h1>There are some text here.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, ullam esse quia suscipit sapiente, provident expedita voluptatum illo facilis asperiores vitae. Atque aliquid et similique nostrum molestiae, dolores dignissimos beatae.</p>
</div>
</div>

<div class="block">
  <div class="div-wrapper">
  <h1>There are some text here.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, ullam esse quia suscipit sapiente, provident expedita voluptatum illo facilis asperiores vitae. Atque aliquid et similique nostrum molestiae, dolores dignissimos beatae.</p>
</div>
  <div class="image-wrapper">
  <img src="https://placekitten.com/900/300"/>
</div>
</div>

<div class="wrapper2">
  <div class="image-overlay">
    <img src="https://placekitten.com/600/400"/>
  </div>
  <div class="row-wrapper">
    <div class="filler"></div>
    <div class="text-block">
      <div class="text-wrapper">
        <h1>Hello World!</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non at sunt consequatur laborum molestiae quidem pariatur quibusdam! Ipsum tempore explicabo dolorum voluptate, asperiores sapiente quod qui modi, iusto assumenda adipisci.</p>
      </div>
    </div>
  </div>
</div>

<div class="wrapper2">
  <div class="image-overlay alt">
    <div class="overlay-filler"></div>
    <div class="image-me">
      <img src="https://placekitten.com/600/400"/>
    </div>
  </div>
  <div class="row-wrapper alt">
    <div class="filler"></div>
    <div class="text-block">
      <div class="text-wrapper">
        <h1>Hello World!</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non at sunt consequatur laborum molestiae quidem pariatur quibusdam! Ipsum tempore explicabo dolorum voluptate, asperiores sapiente quod qui modi, iusto assumenda adipisci.</p>
      </div>
    </div>
  </div>
</div>

SCSS：

.block{
  width: 600px;
  margin: 0 auto;
  border: 1px solid black;
}
.div-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
}
.image-wrapper{
  width: 100%;
  text-align: center;
}
.image-wrapper > img {
  width: 100%;
}


/* Second Block */
.wrapper2{
  width: 80%;
  margin: 0 auto;
  border: 1px solid purple;
  height: 100vh;
}
.row-wrapper{
  display: flex;
  &.alt {
    .filler{
      order: 1;
    }
  }
}
.filler{
  width: 50%;
}
.text-block{
  width: 50%;
  background: blue;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.text-wrapper{
  width: 50%;
}
.image-overlay{
  width: 45%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  &.alt{
    width: 100%;
    .overlay-filler{
      width: 15%;
    }
    .image-me{
      width: 45%;
      img{
      width: 100%;
    }
    }
  }
}
.image-overlay > img {
  width: 100%;
}

解释：它的工作原理是在一个容器中有两个 div； overlay-div 和 row-wrapper（可以命名为其他名称）。 overlay-div 有一个绝对位置，这将使它位于 row-wrapper 的顶部。

row-wrapper 是一个带有填充符和文本块的 flexbox。

请注意，要使其正常工作，包装器的高度必须设置为 100vh。

【讨论】：