考虑以下HTML和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内的绿色条底部,但是它似乎不起作用。有什么想法吗?
JS小提琴:http://jsfiddle.net/qRH33/
我最初认为将.bar
更改为display:table-cell
,会起作用,(例如)但是,在这样做时,单元格的高度与父元素相同。
的唯一解决方案是包装 span 元素:
<div class="eq">
<div id="bars">
<span class="bar"></span>
...
<span class="bar"></span>
</div>
</div>
然后使用以下 CSS(示例) - 它可以工作。
.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
。这适用于不同的高度。(示例)
请注意,.bar
元素之间的间距是因为它们是inline-block
元素。如果要防止这种情况,请参阅此(示例)。
只需给你的div
容器一个line-height
,它等于div
的高度。
line-height: 50px;
这是JSFiddle。