<span>在 div 的右下角</span>

Question

I want a div looking like this:

+--------------------------------+
| (Chip) (Chiiiiip) (Chipppp)    |
| (Chiiiiiiiiiiiipppp)           |
|                                |
|                           More |   
+--------------------------------+

Similarly the "Less" button when the div is expanded with more number of chips.

I can't position the "More" button in the bottom right corner. I want to know how to do it.

Answer 1

If your container has position:relative you can use absolute positioning in a child element.

 .container { width:300px; height:200px; position:relative; padding:10px; border:1px solid red; } .expand { position:absolute; bottom:10px; right:10px; }

 <div class="container"> Text text text Text text text Text text text Text text text Text text text Text text text Text text text <button class="expand">More</button> </div>

Answer 2

Use a div to wrap the content or button and add the CSS styling given below, it should push the content or button to the right side.

.More-div {
 display: flex;
 justify-content: flex-end;
}

Share your CSS codes so that it will be easier to add or modify the CSS styling.

For reference I have added snippet.

 .container{ border: 1px solid #000; display: flex; flex-direction: column; } .more-wrapper{ display: flex; justify-content: flex-end; }

 <div class="container"> <div class='text-wrapper'> Text text text Text text text Text text text Text text text Text text text Text text text Text text text <div> <div class='more-wrapper'> <button>More</button> </div> </div>