Html 浮动div中文本的垂直对齐

我知道这个问题已经被问了十几次了，但在我的情况下，它不起作用。我有以下代码，希望将文本与div的底部对齐

代码笔在这里：

HTML:

我也尝试过将footer name/footer contact类设置为position:relative；，在内部创建了一个附加div，并将其设置为position:absolute；底部：0；但是这不能正常工作，因为文本被包装

---

有人知道解决办法吗？谢谢

既然您使用的是display:table单元格，那个么您就不能去掉float:yes，并将左边距改为padding-left。您正在使用这种方法来处理大量标记。所有您需要的是三个内联块与垂直对齐：底部

<footer class="clearfix">
  <div class="footer-logo">
  <img src="img/logo.png" height="60" alt="logo"/>
  </div><!-- /footer-logo -->
  <div class="footer-name">
    <span>Name Name</span><br/>
    <span class="text-gold">Creation</span>
  </div><!-- /footer-name -->
  <div class="footer-contact">
    <strong class="text-gold">T</strong> +49 (0) 1234456678<br />
    <strong class="text-gold">E</strong> test@test.de
  </div><!-- /footer-contact -->
</footer>

footer {
    height: 70px;
}

    footer p {
        margin:0;
    }

    .footer-logo, .footer-name, .footer-contact {
        float:left;
        height:100%;
        display: table-cell;
        vertical-align: bottom;
    }

    .footer-name, .footer-contact {
        margin-left: 2%;
    }

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}