如何使2个div的底部对齐答案

【问题标题】：How to make the bottom part of 2 divs align如何使2个div的底部对齐
【发布时间】：2016-08-06 00:31:06
【问题描述】：

我目前正在尝试使两个 div 的底部（一个标题和一个导航栏）垂直排列，但我在弄清楚如何使其工作时遇到了一些麻烦。 CSS 中的垂直对齐：底部似乎不起作用。澄清一下，我希望“GOT/IT”文本和导航栏文本元素垂直排列（底部）。代码如下：

.navbar-default {
  padding-top: 65px;
  padding-left: 45px;
  padding-right: 45px;
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 0px;
  border-bottom: 10px solid #2e9eed;
}
.header-text {
  font-size: 64px;
  color: blue;
  position: relative;
  padding-bottom: 20%;
}
.header-item-text {
  background-color: green;
  font-size: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <nav class="navbar navbar-default">

      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><span class = "header-text">GOT/IT</span></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->


      <!-- Desktop + Tablet View -->
      <div class="hidden-xs">
        <div class="pull-right collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="header-item-text"><a href="#">THE WHY</a>
            </li>
            <li class="header-item-text"><a href="#">THE WHAT</a>
            </li>
            <li class="header-item-text"><a href="#">VALIDATE</a>
            </li>
            <li class="header-item-text"><a href="#">ABOUT</a>
            </li>
            <li class="header-item-text"><a href="#">CONTACT</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>

【问题讨论】：

请在您的代码中说明问题 - 什么不完全有效？比我们更容易为您提供帮助。
这可能并不容易。设计的文本字符周围有空间......这就是你所看到的。

标签： html css angularjs

【解决方案1】：

我假设您正在尝试垂直对齐两列的底部。您可以尝试使用如下表格：

<table >
    <tr>
        <td style="vertical-align:bottom">
            <div>
                ....
                ....
            </div>
        </td>
        <td style="vertical-align:bottom">
            <div>
                ....
                ....
            </div>
        </td>
    </tr>
</table>

【讨论】：

【解决方案2】：

您可以为两个 div 赋予相等的 padding-left。我建议使用引导 CSS。您还可以使用 HTML 表格标签。

【讨论】：