Question

我目前正试图让两个div的底部，一个标题和一个导航栏垂直排列，但我在弄清楚如何完成这项工作时遇到了一些麻烦。 CSS中的vertical-align：bottom似乎不起作用。为了澄清，我想要＆＃34; GOT / IT＆＃34;文本和导航栏文本元素垂直排列（底部）。代码如下所示：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

<a [routerLink]="['/about', { foo: 'foo' }]">About</a>

import { Component ,   OnInit  } from "@angular/core";
import { Title } from "@angular/platform-browser";
import { ActivatedRoute }   from "@angular/router";
import { Observable }     from "rxjs/Observable";

@Component({
    template: "<h1>About page! {{ paramName | async }}</h1>",
})

export class AboutComponent implements OnInit {
      public constructor(private route: ActivatedRoute) {}
   public paramName: Observable<string>;
   public ngOnInit() {
       // console.log("App component loaded");
        this.setTitle( "about" );
        this.paramName = this.route.params.map(params => params["foo"] || "None");
    }
};

Answer 2

你可以给两个div提供相等的填充。我建议使用bootstrap CSS。您也可以使用HTML表格标签。

如何使2个div的底部对齐

2 个答案: