將 div 擴展到段落子級增長的右側

Question

如果我在 div 中有一個段落，當段落變長時，是否可以使 div 向左擴展而不是向右擴展？ 我知道這有幾個線程，我已經嘗試過方向：rtl 等，但似乎沒有什么對我有用。

這是一些代碼。

https://codepen.io/haa123/pen/oNxaqwE

HTML：

<div id="container">  
  <div id="container1">
    <p>Lorem ipsum</p>
</div>
<br>
<div id="container2">
    <p>Expanding to the right</p>
</div>

CSS：

#container {
  position: absolute; left: 50%;
}

#container1 {
  background-color: red;
  display: inline-block;
}

#container2 {
  margin-top: 5px;
  background-color: red;
  display: inline-block;
}

這里有一些照片來說明。

這就是我目前所擁有的：

這就是我想要實現的目標：

謝謝！

Answer 1

使用 css 網格：

<div class='container'>
  <div></div>
  <div><p>lorem ipsum</p></div>
  <div><p>expand</p>
</div>

Answer 2

您可以在容器中使用 display flex

 #container { position: absolute; left: 50%; display: flex; flex-direction: column; align-items: flex-end; } #container1 { background-color: red; display: inline-block; } #container2 { margin-top: 5px; background-color: red; display: inline-block; }

 <div id="container"> <div id="container1"> <p>Lorem aaabcdedfqafasafasfafasf</p> </div> <br> <div id="container2"> <p>Expanding to the right asadasdsaqweqweqweqe</p> </div> </div>

Answer 3

我不知道你為什么使用Position:absolute; 但是如果真的需要使用的話，只要給text-aligen: right; 到您的#container ，您的段落將是 rtl。

 #container { position: absolute; left: 50%; text-align: right; } #container1 { background-color: red; display: inline-block; } #container2 { margin-top: 5px; background-color: red; display: inline-block; }

 <div id="container"> <div id="container1"> <p>Lorem ipsum</p> </div> <br> <div id="container2"> <p>Expanding to the right</p> </div>

Answer 4

.bricklet {text-align: right}
.bricklet .content {display: inline-block}
.bricklet .content.hidden {display: none}

<div class="bricklet">
  <div>Expander</div>
  <div class="content hidden">Expanded content</div>
</div>