如何在响应式网站中的同一行上对齐徽标和标题标题

Question

我正在尝试将标题标题和徽标对齐在同一行 在台式机和笔记本电脑上，它看起来很棒，但在移动设备上，徽标与标题重叠，您无法清楚地看到所有文字。

下面是我的代码。

.page-header {
  margin: 10px 0;
  padding: 10px 0;
  width: 100%;
  height: 224px;
  display: block;
  position: relative;
}

.page-header #title {
  text-align: left;
  font-size: 40px;
  float: left;
}

.page-header #logo {
  height: 60px;
  width: 100px;
  float: right;
  right: 0;
  bottom: 0;
  position: absolute;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<header class="page-header">
  <div class="navbar navbar-default navbar-fix-top" role="Navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        
        <a href="#"><img src="images/dove.png" id="logo"></a>
        <div id="title">Birdwatching</div>
      </div>
    </div>
  </div>
</header>

Answer 1

如果您不想重叠，则不应使用绝对定位。此外，您可以使用此处的flexbox方法，因此您可以在此处移除浮动并在HTML中以更自然的顺序移动元素。演示：

＆＃13;

＆＃13;

header .navbar-header {
  /* become a flex-container */
  /* its immediate children will be flex-items */ 
  display: flex;
  /* doing some normalising due to default bootstrap styles */
  width: 100%;
  margin: 0 !important;
  padding: 0 15px;
}

.navbar-header > a {
  /* move to the right */
  margin-left: auto;
}

.navbar-header > button {
  margin-left: 5px;
}

.page-header {
  margin: 10px 0;
  padding: 10px 0;
  width: 100%;
  height: 224px;
  display: block;
}

.page-header #title {
  text-align: left;
  font-size: 40px;
}

.page-header #logo {
  height: 60px;
  width: 100px;
}

＆＃13;

<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<header class="page-header">
  <div class="navbar navbar-default navbar-fix-top" role="Navigation">
    <div class="container">
      <div class="navbar-header">
        <div id="title">Birdwatching</div>

        <a href="#"><img src="images/dove.png" id="logo"></a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle Navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
    </div>
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;