根据孩子的身高调整背景颜色的大小

Question

这是我的密码笔： https://codepen.io/sadpandas/pen/KKwgObb

我有一个flexbox容器和两个子div。 我正在尝试做的是具有与文本框高度匹配的“背景色”，但跨度到包含图像的同级div。

在不使用媒体查询的情况下，在包装后，背景色需要继续包装/匹配文本框的高度，但必须与图像完全分开。

我当前的方法使用线性渐变，以及一个硬编码百分比，该百分比近似于我需要多少文本空间。我正在寻找更可靠和可重用的东西，因为我的网站中有几个部分。

.wrapper {
   width: auto;
    max-width: 1686px;
    background:  linear-gradient(#f7f7f7 50%, white 20%);
    display: flex;
    justify-content: center;
    flex-wrap: wrap-reverse;
}

.left {
  flex-basis: 512px;
  flex-grow: 1;
  padding-top: 60px;
  padding-left: 25px;
}

.right{
  padding-top: 25px;
  flex-basis: 512px;
  flex-grow: 1;
}

我想要实现的图像：

除了对父对象使用线性渐变以外，我愿意使用其他方法来实现此目的。 我怀疑自己正在使用最佳做法，但不确定如何实现这一点。

更多要求： -左侧的图像无法包裹在灰色背景中 -灰色背景必须具有文本高度的高度，并且如果文本容器的高度增加，则应调整其大小。 -文字不能超出灰色背景 -由于客户的要求，我不使用媒体查询。 -图片的开始位置比桌面视图上的文字稍低

我已经尝试过的东西： -使用Javascript。客户拒绝了它，因为他们觉得太高了，无法获得一个容器的高度 -伪元素+ JavaScript。也出于类似原因而被拒绝

感谢您的帮助，谢谢！

Answer 1

如果只希望在文本部分上显示灰色框，则应在其中放置background属性，而不是在同时包含图片和文本的容器上。另一件事是，如果您希望灰色填充容器的整个高度，则应使用repeating-linear-gradient而不是linear-gradient：

.wrapper {
  width: fit-content;
  max-width: 1686px;    
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  flex-direction: column;
  background:  repeating-linear-gradient(#f7f7f7 50%, white 20%);
}

.left {
  flex-basis: 512px;
  flex-grow: 1;
  padding-top: 60px;
  padding-left: 25px;
  order: 1;
}

.right{
  padding: 25px;
  flex-basis: 512px;
  flex-grow: 1;
  width: 520px;
}

Answer 2

在文本容器上使用伪元素：

.wrapper {
  width: auto;
  max-width: 1686px;
  display: flex;
  justify-content: center;
  align-items:flex-end;
  flex-wrap: wrap-reverse;
  overflow:hidden;
  position:relative;
  z-index:0;
}

.left {
  flex-basis: 512px;
  flex-grow: 1;
  padding-top: 60px;
  padding-left: 25px;
}

.right {
  padding: 25px 0;
  flex-basis: 512px;
  flex-grow: 1;
  position:relative;
}
.right:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  bottom:0;
  left:-100vw;
  background:red;
}

<div class="wrapper">
  <div class="left">
    <img src="http://www-tc.pbs.org/wgbh/nova/assets/img/fate-of-easter-island/image-01-large.jpg">
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum., quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum., quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
    deserunt mollit anim id est laborum.
  </div>
</div>