html - 相同高度和宽度的网格 col 卡 html css BOOTSTRAP 3

Question

这就是我的卡片在 1 行中有多余卡片时发生的情况，即使图像尺寸不同，我也需要它具有准确的高度和宽度。这也在 BOOTSTRAP 3 中

.card {
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
}

.card>.card-link {
  color: #333;
}

.card>.card-link:hover {
  text-decoration: none;
}

.card>.card-link .card-img img {
  border-radius: 6px 6px 0 0;
}

.card .card-img {
  position: relative;
  padding: 0;
  display: table;
}

.card .card-img .card-caption {
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
}

.card .card-body {
  display: table;
  width: 100%;
  padding: 12px;
}

.card .card-header {
  border-radius: 6px 6px 0 0;
  padding: 8px;
}

.card .card-footer {
  border-radius: 0 0 6px 6px;
  padding: 8px;
}

.card .card-left {
  position: relative;
  float: left;
  padding: 0 0 8px 0;
}

.card .card-right {
  position: relative;
  float: left;
  padding: 8px 0 0 0;
}

<div class="col-xs-6 col-sm-3">
  <div class="card card-default">
    <div class="card-img">
      <img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
    </div>
    <div class="card-body">
      <p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
      <p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱
        <?php echo $cartprice ?>.00</p>
    </div>
    <div class="card-footer text-center">
      <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
  </div>
</div>

我需要保持相同的宽度和高度，这样就不会发生谢谢你:(((

Answer 1

您需要进行一些调整。我已经记录了源代码中的更改。

主容器变成了flexbox .因为 flexbox 元素的默认值是 stretch , 所有卡片的高度都相同。

图片下方的所有内容都在一个单独的容器中，并与卡片底部对齐。

/* Added */

.overview {
  display: flex;
}

.card-default {
  display: flex;
  flex-wrap: wrap;
}

.card-default>* {
  width: 100%;
}

.excludingImage {
  align-self: flex-end;
  text-align: center;
}

/* End Added */

.card {
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
}

.card>.card-link {
  color: #333;
}

.card>.card-link:hover {
  text-decoration: none;
}

.card>.card-link .card-img img {
  border-radius: 6px 6px 0 0;
}

/*
.card .card-img {
  position: relative;
  padding: 0;
  display: table;
}

.card .card-img .card-caption {
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
}
*/

.card .card-body {
  /* display: table;
  width: 100%; */
  padding: 12px;
}

.card .card-header {
  border-radius: 6px 6px 0 0;
  padding: 8px;
}

.card .card-footer {
  border-radius: 0 0 6px 6px;
  padding: 8px;
}

/*
.card .card-left {
  position: relative;
  float: left;
  padding: 0 0 8px 0;
}


.card .card-right {
  position: relative;
  float: left;
  padding: 8px 0 0 0;
}
*/

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- Class overview is added -->
<div class="col-xs-6 col-sm-3 overview">
  <div class="card card-default">
    <div class="card-img">
      <img src="https://via.placeholder.com/120x100" alt="Card image" class="img-thumbnail" height="100">
    </div>
    <!-- Extra div added to enable alignment at bottom -->
    <div class="excludingImage">
      <div class="card-body">
        <p class="card-text" style="color:#00873a"><b>Cart name</b></p>
        <p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱100.00</strike> ₱100.00</p>
      </div>
      <div class="card-footer text-center">
        <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
    </div>
  </div>
   <div class="card card-default">
    <div class="card-img">
      <img src="https://via.placeholder.com/120x150" alt="Card image" class="img-thumbnail" height="100">
    </div>
    <!-- Extra div added to align at bottom -->
    <div class="excludingImage">
      <div class="card-body">
        <p class="card-text" style="color:#00873a"><b>Cart name</b></p>
        <p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱100.00</strike> ₱100.00</p>
      </div>
      <div class="card-footer text-center">
        <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink"><i class="fa fa-shopping-cart"></i> View Product </button></a></div>
    </div>
  </div>
</div>