需要使用 css 右对齐 div 子元素

Question

我有一个包含 2 个div 的父div。一个左对齐，另一个div 右对齐。因此，每个元素都包含子元素。

.card-middle-row  {

}
.card-middle-row .container-right {
float: right;
margin-right: 12px;
line-height: 20px;
color: #727272;
font-size: 12px;
}
.card-middle-row .container-left {
float: left;
margin-left: 12px;
line-height: 20px;
color: #727272;
font-size: 12px;
}
.card-middle-row .container-left span {
color: #212121;
font-size: 20px;
}
.card-middle-row .container-right span {
color: #212121;
font-size: 20px;
}
.card-middle-row > div {
margin-top: 10px;
line-height: 20px;
}

<div class="card-middle-row">
<div class="container-left">
<div>Quantity</div>
<div>
<span>Cancelqty</span> Out of 100
</div>
</div>
<div class="container-right">
<div>Price</div>
<div><span>order</span></div>
</div>
</div>

所以问题是div容器权限包含子元素。由于<span>标记，两个子元素未正确对齐。

Answer 1

将text-align:right添加到您的.container-right选择器中。试试这个。

.card-middle-row .container-right {
float: right;
margin-right: 12px;
line-height: 20px;
color: #727272;
font-size: 12px;
text-align: right;
}

Answer 2

尝试使用弹性框

.container {
display: flex;
justify-content: flex-end;
}

Answer 3

我会使用Display Flex来保持一切井井有条。

.container-right{
display:flex;
align-items:center;
justify-content:center;
}