Question

我使用这个插件，将所有.item div转换为相同的高度。（最高的）它工作正常，如果我在控制台中查看它，所有.item div都是402px高度。这些.item div是正面相对的。

在下图中，您可以看到文本输入和添加到购物车按钮。

最后一个div更高，因为图像更高。

如何在div底部输入数字输入和添加到购物车按钮？它们位于.input-group div中。如果我给.input组div位置绝对，.item div将失去他的高度，它将是大约360px，从402 px。

    <div class="col-md-3 main_item_div"> <a href="/termek/62/far-cry-primal-jatek-pc" title="Far Cry Primal Collectors Edition PC" class="main_item_img_to_link"> <img src="/images/item/thumb_1880a74a-c52e-4261-8763-636e5bb04089_1.f19920f7654d3af34771dc286d34b9ec-6042638989.jpeg" alt="Far Cry Primal Collectors Edition PC" class="img-responsive"> </a>
  <h2 class="main_item_title"><a href="/termek/62/far-cry-primal-jatek-pc" title="Far Cry Primal Collectors Edition PC" class="main_item_title_to_link">Far Cry Primal Collectors Edition PC</a></h2>
  <span class="main_item_cikkszam">Cikkszám: DT79WYBBM</span> <span class="main_item_kiszereles">Kiszerelés: Darab</span> <span class="main_item_kiszereles"><b>Készleten</b></span>
  <input type="hidden" value="0" id="MinimumOrder62">
  <span class="main_item_price_2">13.900 Ft,-</span><span class="main_item_price_3">Akciós ár: 12.900 Ft,-</span><span class="main_kedvezmeny_mertek_szazalek">-7 %</span>
  <div class="input-group item_buttons_div">
    <input type="text" id="item_darabszam62" class="form-control item_darabszam" value="1">
    <span class="input-group-btn">
    <button onClick="add_to_cart(62);" class="btn btn-secondary item_add_to_cart" type="button"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Kosárba</button>
    </span></div>
</div>

bootstrap .input-group的官方CSS：

.input-group {
    position: relative;
    display: table;
    border-collapse: separate
}

如果我写相对于绝对值，并且底部：0，则.item div将会松开约40-50px的高度。以下是这个..

.input-group {
    position: absolute;
    bottom:0;
    display: table;
    border-collapse: separate
}

更新2016 12 11：

现在我不使用等高插件，我添加产品标题修复55px高度。我可以把它放到媒体查询中吗？因为我在显示器上只需要这个高度，在移动设备上，div就在彼此之下......

还有一个步骤，我可以用什么方式处理图像？图像位于链接中，并且具有img-responsive类。上传产品时，拇指图像可以是固定尺寸，200x200,350x350 ....或矩形，200x150 ......

如何将theese图像垂直居中放置在链接中，并且，我是否可以仅在监视器视图中为链接提供最大或固定高度，而不是移动？

产品名称css：

    .main_item_title {
    line-height: 18px;
    margin-top: 7px;
    margin-bottom: 10px;
    font-size: 15px;
    height:55px;
    font-weight: 700;
}
.main_item_title_to_link {
    color: #3c4d5a;
    -webkit-transition: color .5s;
    -moz-transition: color .5s;
    -ms-transition: color .5s;
    -o-transition: color .5s;
    transition: color .5s;
}

产品大拇指img css： - 现在，它没有任何CSS，只有img有一个img-responsive类。

Answer 1

你可以做到

position: absolute;
bottom: 0;

并解决某些部分落后.input-group

的问题

你可以padding:bottom:50px（50px或 .input-group 的高度）

Answer 2

我认为只有两种方式：

1.您必须为图像设置max-height属性。所以图像高度相同。

用于较大的列使用滚动垂直

overflow-y：滚动;

在bootstrap col-md-3 div

2 个答案: