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

您需要调整订单并将25％替换为25％，每行总计100％。您还需要将父级容器的高度设置为使用％height和子元素：

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

Answer 2

如果您使用bootstrap4，我不明白为什么要使用float ...请使用boostartp4 [Flex Utilities] 类代替这些类型网格布局......同样为了良好的实践，尝试将div包装成包装器divs

Stack Snippet

＆＃13;

<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 p-0 d-flex no-gutters" style="background-color: aqua;">
    <div class="cartimage" style="background-color:red;">
      <img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
    </div>
    <div class="d-flex flex-column" style="flex: 2;">
      <div class="carttext col" style="background-color:green;">
        khjg
      </div>
      <div class="cartamt col" style="background-color:yellow;">
        amt
      </div>
    </div>
    <div class="d-flex flex-column col">
      <div class="cartprice col" style="background-color:purple">
        price
      </div>
      <div class="cartbutton col" style="background-color:pink">
        button
      </div>
    </div>
  </div>
</div>

＆＃13;

使用width和float对齐div的问题

2 个答案: