自举中的输入组div,将其置于底部
问题描述:
在Bootstrap网上商店页面上,即时将产品列为col-md-3
div
。这些div
现在有相同的height
width
jquery。自举中的输入组div,将其置于底部
如何将input-group
,div
始终放在这些col-md-3
divs的底部?
我上传了一张图片,对此,你可以看到,我的问题是什么。如果产品名称长或短,或者只显示一个价格,则会出现产品编号输入和添加到购物车按钮,并且我希望它们总是位于底部。
<div class="col-md-3 main_item_div">
<a href="#" title="ASUS B85M-G 90MB0G50 alaplap" class="main_item_img_to_link">
<img src="test.jpg" alt="ASUS B85M-G 90MB0G50 alaplap" class="img-responsive">
</a>
<h2 class="main_item_title">
<a href="#" title="ASUS B85M-G 90MB0G50 alaplap" class="main_item_title_to_link">Product name</a>
</h2>
<span class="main_item_cikkszam">Cikkszám: B85M-G 90MB0G50</span>
<span class="main_item_kiszereles">Kiszerelés: Darab</span>
<span class="main_item_kiszereles"><b>Készleten</b></span>
<input type="hidden" value="1" id="MinimumOrder2">
<span class="main_item_price_2">19.090 Ft,-</span><span class="main_item_price_3">Akciós ár: 18.290 Ft,-</span>
<div class="input-group">
<input type="text" id="item_darabszam2" class="form-control item_darabszam" value="1">
<span class="input-group-btn">
<button onClick="add_to_cart(2);" 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>
答
该解决方案将被给予相对位置的父元素(这里的“主项 - 格”),然后给底部:0像素和绝对位置的子元素(这里是“输入组”)。
无论父元素的内容如何,这都会使input-group元素保持底部。
.main_item_div {
position: relative;
}
.input-group {
position: absolute;
bottom: 0;
}
你可以看到在这个fiddle
希望这有助于例子。 谢谢。
答
你可以试试这个CSS'main_item_div'。
.main_item_div {
position:absolute;
bottom:0;
left:0;
}
答
你可以通过css文本溢出来实现:ellipsis;
你可以使用:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
OR
http://masonry.desandro.com/
答
有4个产品具有不同的高度
1 - 你可以为化妆等高jQuery代码
2和与此css代码,你可以把输入组放在每个产品的底部
这是为哟ü
,这是波纹管
$(document).ready(function(){
var highestItem = 0;
$('.item-inner', this).each(function(){
if($(this).height() > highestItem) {
highestItem = $(this).height();
}
});
$('.item-inner',this).height(highestItem);
});
.box-container{
width: 100%,;
padding: 20px;
}
.item{
padding: 10px;
}
.item-inner{
background-color: #f2f2f2;
padding: 10px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.media a img{
width: 100%;
}
.content{
margin-bottom: 80px;
}
.btn-action{
display: block;
position: absolute;
bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box-container">
\t <div class="row">
\t <div class="item col-md-3 col-xs-6">
\t \t <div class="item-inner">
\t \t <div class="content">
\t \t <div class="media">
\t \t <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-1" alt="product-1"></a>
\t \t </div>
\t \t <h2></h2>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus veritatis reprehenderit magni, alias ullam itaque fugit corporis autem, consequatur, nobis officiis.</p>
\t \t </div>
\t \t <div class="btn-action">
\t \t \t <div class="input-group">
\t \t \t \t <input type="text" class="form-control" value="1">
\t \t \t \t <span class="input-group-btn">
\t \t \t \t <button class="btn btn-primary" type="button">
\t \t \t \t <i class="fa fa-shopping-cart"></i> Action
\t \t \t \t </button>
\t \t \t \t </span>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="item col-md-3 col-xs-6">
\t \t <div class="item-inner">
\t \t <div class="content">
\t \t <div class="media">
\t \t <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-2" alt="product-2"></a>
\t \t </div>
\t \t <h2></h2>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
\t \t </div>
\t \t <div class="btn-action">
\t \t \t <div class="input-group">
\t \t \t \t <input type="text" class="form-control" value="1">
\t \t \t \t <span class="input-group-btn">
\t \t \t \t <button class="btn btn-primary" type="button">
\t \t \t \t <i class="fa fa-shopping-cart"></i> Action
\t \t \t \t </button>
\t \t \t \t </span>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="item col-md-3 col-xs-6">
\t \t <div class="item-inner">
\t \t <div class="content">
\t \t <div class="media">
\t \t <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-3" alt="product-3"></a>
\t \t </div>
\t \t <h2></h2>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus.</p>
\t \t </div>
\t \t <div class="btn-action">
\t \t \t <div class="input-group">
\t \t \t \t <input type="text" class="form-control" value="1">
\t \t \t \t <span class="input-group-btn">
\t \t \t \t <button class="btn btn-primary" type="button">
\t \t \t \t <i class="fa fa-shopping-cart"></i> Action
\t \t \t \t </button>
\t \t \t \t </span>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="item col-md-3 col-xs-6">
\t \t <div class="item-inner">
\t \t <div class="content">
\t \t <div class="media">
\t \t <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-4" alt="product-4"></a>
\t \t </div>
\t \t <h2></h2>
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus veritatis reprehenderit magni, alias ullam itaque fugit corporis autem..</p>
\t \t </div>
\t \t <div class="btn-action">
\t \t \t <div class="input-group">
\t \t \t \t <input type="text" class="form-control" value="1">
\t \t \t \t <span class="input-group-btn">
\t \t \t \t <button class="btn btn-primary" type="button">
\t \t \t \t <i class="fa fa-shopping-cart"></i> Action
\t \t \t \t </button>
\t \t \t \t </span>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t </div>
</div>
你好演示! 我写你告诉我的CSS。你可以在这里看到结果:[链接](http://projektar.hu/aktualis-akciok) 我可以修复如果屏幕不移动的错误,但如果我用鼠标滚轮放大页面,divs不要工作很好,我认为是因为这个职位。 (对不起英语不好) –