调整父母以外的孩子

Question

所以我有一个设计，我想在我正在工作的网站中实现。基本上，它是一个背景图像（div a），例如填充可用宽度的70％，另一个div（div b）包含div a之上的文本。问题是，两个div都必须分别对齐页面的左侧和右侧（两边都有空白），并且div a的高度总是比div b高。这里是希望使得它更清晰的图像：

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

顺便说一句，该网站是响应和动态的，所以它也应该适当地扩展。仿佛这还不够刁钻_（ツ）_ /¯

Answer 1

编辑：根据您的评论（“？是不是也可以当高度依赖于格B中的内容”），新低于答案：

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

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

---

原来的答复：

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

让我知道如果你有任何关于这是如何工作的问题。

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

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