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

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 seletor。试试这个。

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