水平對齊最后 2 級嵌套 div

Question

我正在嘗試覆蓋軟件生成的 HTML。 我無法更改 HTML，但是該軟件能夠添加內聯 CSS。這些是彼此嵌套的塊。

<div id='A'> DIV A
  <div id='B'> DIV B
    <div id='C'> DIV C
    </div>
  </div>
</div>

這里A>B>C。 我試過添加

#A > div {display:inline-blocks;} 

&

#A {
display: flex;
flex-direction: row; }

但不知何故，DIV C 始終低於 DIV B，因為它在 DIV B 下編碼。無論如何，我可以覆蓋 CSS。我正在尋找的 output 如下所示，DIV B 和 DIV C 水平對齊，不應重疊不同屏幕尺寸

Answer 1

使用 css 做到這一點的唯一方法是在 div 上使用 position absolute 並覆蓋您可以使用的特定內容。重要。

div a{
 position: relative;
 padding:0 15px;
}

div b {
 witdh:20%
}

div c{
 position: absolute;
 width:70%;
 bottom:0;
 right:15px;
}

一旦我們使用百分比大小，此代碼將適用於某些分辨率，但您需要檢查它們並在需要時改進代碼。

也可以選擇顯示無 div c 並在 div b 之外用 Js 重新創建它。