这将达到目的:
#bars { display: table-cell; border: solid 1px black;}#bars > div { display: inline-block; vertical-align: bottom; width: 5px; background-color: #999; margin-left: 2px;}#bars > div:first-child { margin-left: 0;}它
display: table-cell;在默认情况下已
vertical-align:baseline;应用的父div上使用。这改变了
float: left;对子div 的需求,并允许我们使用
display: inline-block;。这也消除了对CSS清除修复程序的需要。
编辑-根据@thirtydot的评论,将其添加vertical-align: bottom;
到子div中可消除底部的空白。
因此,我更改了上面的CSS和jsFiddle。 我保留了,display: table-cell;
以便父div用0填充来包装子div,看起来又漂亮又时髦!



