html - 使用宽度和 float 问题对齐 div

Question

所以我要做的是将这些 div 对齐到引导卡中。我的问题是，我能够将它的左半边对齐，但我不知道如何对齐最右边的元素。我目前正在使用宽度百分比来让它保持响应，尽管由于图片总是相同大小，我将一件事设置为固定。

   <div class="card" style="width:65%;float:left;">
        <h5 class="card-header">Window Latch Black (Small)</h5>
        <div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;">
            <div class="cartimage" style="background-color:red;float:left">
                <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
            </div>
            <div class="carttext" style="height:50%;width:75%;background-color:green;">
               khjg
            </div>
            <div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
                amt
            </div>
            <div class="cartprice" style="height:50%;width:15%;background-color:purple;float:right">
                price
            </div>
            <div class="cartbutton" style="height:50%;width:15%;background-color:pink;float:right">
                button
            </div>
        </div>
    </div>

Answer 1

您需要调整顺序并将 15% 替换为 25% 以使每行总计为 100%。您还需要为父容器设置一个高度，以便在子元素中使用 % 高度:

.rounded-circle {
  border-radius:50%;
  vertical-align:top;
}

<div class="card" style="width:65%;float:left;">
  <h5 class="card-header">Window Latch Black (Small)</h5>
  <div class="card-body clearfix text-center" style="width:100%;display:inline-block;background-color: aqua;height:140px">
    <div class="cartimage" style="background-color:red;float:left">
      <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    </div>
    <div class="cartprice" style="height:50%;width:25%;background-color:purple;float:right">
      price
    </div>
    <div class="carttext" style="height:50%;width:75%;background-color:green;">
      khjg
    </div>
    <div class="cartbutton" style="height:50%;width:25%;background-color:pink;float:right">
      button
    </div>
    <div class="cartamt" style="height:50%;width:75%;background-color:yellow;">
      amt
    </div>


  </div>
</div>

顺便说一下，由于您使用的是 Bootstrap V4，因此您可以依靠 flex 来创建布局:

.rounded-circle {
  border-radius: 50%;
  vertical-align: top;
}

.cartprice {
  background: red;
  flex-basis: 75%;
}

.carttext {
  background: green;
  flex-basis: 25%;
}

.cartbutton {
  background: blue;
  flex-basis: 75%;
}

.cartamt {
  background: yellow;
  flex-basis: 25%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
  <h5 class="card-header">Window Latch Black (Small)</h5>
  <div class="card-body text-center d-flex">
    <div class="cartimage">
      <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    </div>
    <div class="d-flex flex-wrap w-100" >
      <div class="cartprice">
        price
      </div>
      <div class="carttext">
        khjg
      </div>
      <div class="cartbutton">
        button
      </div>
      <div class="cartamt">
        amt
      </div>
    </div>

  </div>
</div>