html - 将 float div 对齐到底部

Question

看看这个 jsfiddl 示例: 我希望左列与底部对齐。 不应该那么难，但我无法让它发挥作用。

http://jsfiddle.net/magwalls/rdrznzhe/

<div width="100%" class="clear">
  <div class="fl" width="50%">I want this aligned to bottom</div>
    <div class="fr" width="50%">
      <div>Row 1</div>
      <div>Row 2</div>
      <div>Row 3</div>
    </div>    
</div>
<hr class="clear"/>

编辑: 我在这里用 Vitorinos 和 Dankos 解决方案更新了我的 JS Fiddle 来解决我的问题。 http://jsfiddle.net/magwalls/rdrznzhe/12/

Answer 1

据我所知，您无法设置 floated 的垂直对齐方式元素，但您可以尝试使用 inline-block并 float 其他元素:

.fl, .fr {
    display:inline-block;
    vertical-align:bottom;
    width:50%;
}
.fr > div {
    float:right;
    clear:right;
}

检查这个 Demo Fiddle

---

如果您使用 inline-block 请注意不要忘记删除空格 CSS TRICKS在这种情况下，我使用评论 <!-- -->