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

时间：2018-10-30 06:57:15

标签： html css

这是我的卡片在一行中有多余卡片时发生的情况，即使图像尺寸不同，我也需要将其精确设置在高度和宽度上。这也在BOOTSTRAP 3中

enter image description here 

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

我需要使用相同的宽度和高度，以免发生这种情况。谢谢：（（（

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

您可以使用flexbox来实现向父div添加display:flex并检查

使用flexbox检查下面的代码段

.card-main {
  display: flex;
}
<div class="card-main">
  <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>
  <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>
  <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>
</div>

注意：请在媒体查询中将display:flex更改为display:block以响应：

相关问题
最新问题