我一直试图让3 <div>
在父母<div>
的底部彼此相邻。由于我使用Bootstrap col-md-3
,浮动自动进行。我在互联网上搜索了解决方案,但我找不到能解决问题的方法。
我以为我创造了一个没有Bootstrap的东西,它就像一个魅力: http://jsfiddle.net/6vbpmkgh/
这是一个简单的设置,但是当我在我的代码中实现它时它不起作用。
<div class="option-list">
<div class="col-md-3 col-md-offset-1 pakketten">
<p>Test1</p>
<p>Test2</p>
</div>
<div class="col-md-3 col-md-offset-1 pakketten">
<p>Test1</p>
</div>
<div class="col-md-3 col-md-offset-1 pakketten">
<p>Test1</p>
<p>Test2</p>
</div>
</div>
正如您所看到的,<div>
中间的内容较少,所以这应该更小但仍然在底部。 (见jsfiddle链接视觉)
答案 0 :(得分:2)
垂直对齐仅适用于内联块元素,浮动元素忽略垂直对齐属性
使用
display: inline-block
vertical-align:top;
*{
padding: 0;
margin: 0;
}
div{
text-align: center;
}
div > div{
display: inline-block;
vertical-align: top;
width: 30%;
background: #ccc;
min-height: 250px;
}
div.small{
min-height: 100px;
background: #999;
}
<div>
<div>div</div>
<div class="small">div small</div>
<div>div</div>
</div>
vertical-align:middle;
*{
padding: 0;
margin: 0;
}
div{
text-align: center;
}
div > div{
display: inline-block;
vertical-align: middle;
width: 30%;
background: #ccc;
min-height: 250px;
}
div.small{
min-height: 100px;
background: #999;
}
<div>
<div>div</div>
<div class="small">div small</div>
<div>div</div>
</div>
vertical-align:bottom
*{
padding: 0;
margin: 0;
}
div{
text-align: center;
}
div > div{
display: inline-block;
vertical-align: bottom;
width: 30%;
background: #ccc;
min-height: 250px;
}
div.small{
min-height: 100px;
background: #999;
}
<div>
<div>div</div>
<div class="small">div small</div>
<div>div</div>
</div>