レスポンシブ・サイトの同じ行にロゴとヘッダーのタイトルを整列する方法

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

。またここではフレックスボックスアプローチを使用することができますので、ここで浮動小数点数を削除し、要素をより自然な順序でHTMLで移動することができます。デモ：

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

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