<span> 在 div 的右下角

Question

我想要一个这样的div:

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

同样的"Less">

我无法定位"More"按钮在右下角。我想知道怎么做。

Answer 1

如果你的容器有position:relative，可以在子元素中使用绝对定位。

.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

使用div来包装内容或按钮，并添加下面给出的CSS样式，它应该将内容或按钮推到右侧。

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

分享你的CSS代码，以便更容易添加或修改CSS样式。

作为参考，我添加了一个片段。

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