Question

我的商店中有3张引导卡，但是我的问题是，在移动视图中，它的高度和宽度不同。

我需要的是将IT对齐并在移动设备中查看时具有完全相同的宽度和高度。

这是我的卡片的CSS代码：

/* EXAMPLE 1 - BOOTSTRAP FLEXBOX
   - Equal Height Columns in Rows
   - Equal Height Thumbnails
   - Flex Grow to Fill Paragraph Height
*/

/* Flexbox Equal Height Bootstrap Columns (fully responsive) */
@media only screen and (min-width : 500px) {
  .flex-row.row {
    display: flex;
   flex-wrap: wrap;
  }
  .flex-row.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
  }
  .flex-row.row:after, 
  .flex-row.row:before {
   display: flex;
  }
  .flex-row.row > [class*='col-'] > .box {
   display: flex;
   flex: 1;
  }
}

/* Grow thumbnails to fill columns height */
.flex-row .thumb,
.flex-row .caption {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/* Flex Grow Text Container */
.flex-row .caption p.flex-text {
  flex-grow: 1;
}

/* Flex Responsive Image */
.flex-row img {
  width: 100%;
  height: auto;
}

.thumb{
  padding-bottom: 10px;
}

.caption{

}
/* EXAMPLE 2 - CSS TABLES EQUAL HEIGHT
   - ie9 support 
   - not responsive (mobile fallback)
*/

.table-row.row,
.table-row-equal {
  display: table;
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
}
.table-row.row [class*="col-"] {
  width: 25%;
}
.table-row.row [class*="col-"],
.table-row-equal .thumb {
  float: none;
  display: table-cell;
  vertical-align: top;
}
.table-row-equal {
  border-spacing: 30px 0px;
}
.table-row-equal .thumb {
  width: 1%;
}
/* mobile fallback to support partial responsiveness */
@media only screen and (max-width: 500px) {
  .table-row-equal .thumb {
    display: block;
    width: 100%;
  }
}

/* MASONARY BOOTSTRAP 3 GRID
   - Who needs V4?
*/
.masonary-row.row {
  -webkit-column-gap: 30px;
  column-gap: 30px;
  padding-left: 15px;
  padding-right: 15px;
  word-wrap: break-word;
  -webkit-column-fill: balance;
          column-fill: balance;
}
.masonary-row [class*="col-"] {
  display: inline-block;
  width: 100%;
  height: 100%;
  float: none;
  padding: 0px;
  -webkit-column-fill: balance;
          column-fill: balance;
}

@media (min-width: 480px) {
  .masonary-row.row {
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media (min-width: 768px) {
  .masonary-row.row {
    -webkit-column-count: 3;
    column-count: 3;
  }
}
/* demo */
.bootflex .well {
      flex-grow: 1;
  }

/* pre hack for small devices */
pre {
  display: flex;
  flex: 1;
}
.flex-row.flex-code.row > [class*='col-'] .flex-text {
  flex-grow: 1;
  display: flex;
}
.overview {
  display: flex;
  padding-right: 10px;
}

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

这是我的HTML卡的代码：

<div class="col-xs-6 col-sm-4 col-lg-3">
    <div class="thumb">
        <div class="caption 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="excludingImage">
                <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 btn-sm">
                            <i class="fa fa-shopping-cart"></i> View Product 
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

检查正在加载的图像以及每个产品的文本。如果每张卡的图像高度都不相同，则会推高每张卡的高度。每张卡的文字也一样，如果产品名称溢出到第二行，则会推高卡的高度。

Answer 2

如果可以使用JavaScript解决方案，请查看Match Height。

它基本上获得给定选择器的最大高度，然后应用于所有匹配元素

示例：

$(function() { 
    $('.card_wrapper_class').matchHeight(); 
});

Bootstrap 3张具有相同高度和宽度的CSS HTML卡

2 个答案: