javascript - 根据 child 高度调整背景颜色

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;
}

我想要实现的目标的图片:

我愿意在父对象上使用线性渐变以外的其他方法来实现这一点。 我怀疑我使用的是最佳实践，但我不确定如何实现这一点。

还有一些要求: - 左边的图像不能包裹在灰色背景中 - 灰色背景的高度必须与文本高度相同，如果文本容器的高度增加，则应调整其大小。 - 文字不能从灰色背景中探出 - 由于客户请求，我避免使用媒体查询。 -图像开始于桌面 View 中略低于文本的位置

我已经尝试过的事情: - 使用Javascript。客户拒绝了它，因为他们发现它对于获得一个容器的高度来说太矫枉过正了 - 伪元素 + javascript。也因为类似原因被拒

感谢任何帮助，谢谢!

Answer 1

如果您只想在文本部分使用灰色框，那么您应该在其中放置背景属性，而不是在包含图片和文本的容器上。另一件事是，如果您希望灰色填充容器的整个高度，您应该使用 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;
}