位置不工作在引導col-md-3 divs

我使用這個插件，將所有.item divs變成相同的高度（對最高）它工作正常，如果我在控制檯中查看它，所有.item divs的高度爲402px。這些.item divs相對於postive。位置不工作在引導col-md-3 divs

在下圖中，您可以看到一個文本輸入和一個添加到購物車按鈕。

最後一個div更高，因爲這是更高的圖像。

如何獲得數字輸入和添加到購物車按鈕到divs底部？這些在.input-group div中。如果我給絕對的.input組div位置，.item div將會丟失他的高度，它將從402px開始大約360px。

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

自舉。輸入組官方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：

現在我不使用的相等的高度插件，以及i增加了產品的標題的修復程序55像素的高度。我是否可以將其放入媒體查詢中？因爲我只需要在顯示器上的這個高度，在手機上，divs在彼此之下...

而且還有一個步驟，我該怎麼做白色圖像？圖像位於鏈接內部，並且具有img響應類。當上傳產品時，拇指圖像可以是固定尺寸，200x200,350x350 ....或矩形，200x150 ...

如何將這些圖像垂直居中放置在鏈接中，並且我可以給出最大值或僅在監視器視圖中爲鏈接固定高度，而不是移動？

產品名稱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響應類。

來源

2016-12-10 Takács Zoltán

你可以做

position: absolute; 
bottom: 0;

和需要解決的問題，有些部分是後面.input-group

你可以做padding:bottom:50px

來源

2016-12-10 13:10:05

我認爲（。輸入組的50像素或高度）只有兩種方法：

1.您必須爲您的圖像設置最大高度屬性。使圖像高度相同。

較大柱使用滾動垂直

溢出-γ：滾動;

來源

2016-12-10 16:51:37

我在鏈接的媒體查詢中添加了一些CSS。 @media only screen and（min-width：992px）{ \t \t .main_item_img_to_link {display：block;文字修飾：無;溢出：隱藏;高度：185px; } } –

現在，我對齊img垂直中心。 .main_item_img_to_link {display：block; text-decoration：none; vertical-align：middle; display：table-cell; } .main_item_img_to_link> img {display：block; 身高：自動; } –

位置不工作在引導col-md-3 divs

回答

相關問題