我有一些非常基本的代码,它可以工作,除了一切都与顶部对齐…理想情况下,条形将对齐到底部.我想我可以使用固定定位,因为尺寸在50px到50px的平方,但我更喜欢一些不太“固定”的东西.
<div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
</div>
我不想使用库或JS添加.保持这种轻量化是关键任务.
我也更喜欢酒吧是垂直的.任何CSS专家都在关注我似乎缺少的光线？我用谷歌搜索过,大多数例子都很复杂/复杂,
解决方法
首先,将CSS与HTML分开.当你可以为你的内部div使用一个bar类时,你会重复太多的代码.
bottom：0不会为相对定位的div更改任何内容.
如果你想使用相对定位,摆脱浮动和底部并使用display：inline-block和vertical-align：baseline;.此外,在这种情况下,您需要删除内部div(换行符)之间的HTML中的任何空格.
像这样(你可以在http://dabblet.com/gist/2779082看到演示)：
HTML
<div class="graph">
<div style="height: 22px;" class="bar"></div><!--
--><div style="height: 11px;" class="bar"></div><!--
--><div style="height: 6px;" class="bar"></div><!--
--><div style="height: 49px;" class="bar"></div><!--
--><div style="height: 28px;" class="bar"></div>
</div>
CSS
.graph {
width: 50px;
height: 50px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
.bar {
width: 8px;
margin: 1px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: baseline;
}
