調整父母以外的孩子

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>