如何垂直对齐底部 [英] How to vertical align bottom
问题描述
考虑以下HTML和CSS:
Consider the following HTML and CSS:
HTML
<div class="eq">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
CSS
.bar {
background-color: green;
width:15px;
height:40px;
display: inline-block;
vertical-align: bottom;
position: relative;
bottom:0;
}
.eq {
min-height:50px;
border:1px solid blue;
}
我想垂直对齐:在蓝色div内的绿色条下面,但是似乎不起作用.有什么想法吗?
I want to vertically-align:bottom the green bars inside the blue div, however it doesn't seem to work. Any ideas?
JS Fiddle: http://jsfiddle.net/qRH33/
JS Fiddle: http://jsfiddle.net/qRH33/
推荐答案
我原本是将 .bar
更改为 display:table-cell
会起作用,
I originally though that changing .bar
to display:table-cell
, would work, (example) however, in doing that, the cell takes the same height as the parent element.
想到的唯一解决方案是包装span元素:
The only solution that comes to mind is wrapping the span elements:
<div class="eq">
<div id="bars">
<span class="bar"></span>
...
<span class="bar"></span>
</div>
</div>
,然后使用以下CSS (示例) -可以.
and then using the following CSS (example) - it works.
.bar {
background-color: green;
width:15px;
height:40px;
display: inline-block;
vertical-align:bottom;
}
#bars {
display:table-cell;
vertical-align:bottom;
}
.eq {
min-height:100px;
border:1px solid black;
display:table;
}
基本上,我们将 display:table-cell
和 vertical-align:bottom
分配给包装元素 #bars
.这适用于变化的高度. (示例)
Basically, we assign display:table-cell
, and vertical-align:bottom
to the wrapping element, #bars
. This works for varying heights. (example)
请注意, .bar
元素之间的间距是因为它们是 inline-block
元素.如果要防止这种情况,请参见此 (示例) .
Note, that the spacing between the .bar
elements is because of the fact that they are inline-block
elements. If you want to prevent that, see this (example).
这篇关于如何垂直对齐底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!