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