在父母之外调整孩子

Question

所以我有一个我想在我正在研究的网站上实现的设计。基本上，它是一个背景图像（div a），例如填充可用宽度的70％，另一个div（div b）包含div a之上的文本。问题是，两个div必须分别对齐页面的左侧和右侧（两侧都有边距），div a的高度应始终大于div b。这是一张希望更清晰的图像：

是否有可能实现这一点，如果是这样，怎么做？我已经尝试在div中包装div b，将其位置设置为relative并设置正确的属性，但是我无法让它在右侧对齐，例如。

顺便说一句，该网站具有响应性和动态性，因此它也应该正确扩展。好像它不够棘手¯_（ツ）_ /¯

Answer 1

编辑：根据您的评论（＆＃34;当高度取决于div b中的内容时也可以吗？＆＃34;），新答案如下：

＆＃13;

＆＃13;

.divs {
  overflow: auto;
  position: relative;
}

.div--a {
  background: red;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 30%;
}

.div--b {
  background: lightblue;
  width: 70%;
  margin: 4% 0;
  position: relative;
  float: right;
}

＆＃13;

<div class="divs">
  <div class="div--a"></div>
  <div class="div--b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at mauris at quam accumsan dictum. In vel mauris laoreet, varius quam nec, cursus sapien. Vivamus odio nisi, tristique blandit posuere in, iaculis sit amet lorem. Donec commodo vel eros ut tincidunt. </div>
</div>

＆＃13;

＆＃13;

＆＃13;

原始回答：

这里是在DIV B上使用绝对定位的快速尝试，以及按百分比计算的大小（可扩展）。

如果您对此如何运作有任何疑问，请与我们联系。

＆＃13;

＆＃13;

.divs {
  height: 200px;
  position: relative;
}

.div--a {
  background: red;
  width: 70%;
  height: 100%;
}

.div--b {
  background: blue;
  width: 70%;
  height: 80%;
  position: absolute;
  top: 10%;
  right: 0;
  z-index: 1;
}

＆＃13;

<div class="divs">
  <div class="div--a"></div>
  <div class="div--b"></div>
</div>

＆＃13;

＆＃13;

＆＃13;