html – 在不破坏布局的情况下将div与底部对齐

发布时间：2020-12-14 23:20:20 所属栏目：资源来源：网络整理

导读：我想在这里将条形对齐到底部：http://jsfiddle.net/7vdLV/67/ 我尝试使用以下技巧： .graph { position: relative; } .weekbar { position: absolute; bottom: 0; left: 0; } 然而它打破了图表,在这种情况下,有人能告诉我应该怎么做吗？最佳答案最简单的解

我想在这里将条形对齐到底部：http://jsfiddle.net/7vdLV/67/

我尝试使用以下技巧：

  .graph { position: relative; }
  .weekbar { position: absolute; bottom: 0; left: 0; }

然而它打破了图表,在这种情况下,有人能告诉我应该怎么做吗？

最佳答案

最简单的解决方案

应用

.weekbar{
 position:relative;
 display:inline-block;
 top:50%; // height of biggest bar
}

检查这个JSFiddle

或者,如果古老的浏览器支持不是很重要,您可以使用:: before元素,如下所示：

.graph::before{
 content:"";
 display:block;
 height:50%; // height of the biggest bar 
}
.weekbar{
 display:inline-block;
}

检查这个JSFiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!