If i have a paragraph inside a div, is it possible to make the div expand to the left instead of to the right, when the paragraph gets longer? I know there are several threads on this, and i have tried with direction: rtl etc, but nothing seems to work for me.
Here is some code.
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;
}
Here are some photos to illustrate.
This is what I have at the moment:
This is what I want to achieve:
Thanks!
use css grid:
<div class='container'>
<div></div>
<div><p>lorem ipsum</p></div>
<div><p>expand</p>
</div>
You can use display flex in your container
#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>
I do not know why you used Position:absolute;
But if it is really necessary to use it, just by giving text-aligen: right;
to your #container
, your paragraph will be 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>
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.