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

Question

我有一个包含 2 个 div 的父 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 container-right 包含子元素。由于<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;
}