レスポンシブ・ヘッダーのCSS配置

モバイル・ナビゲーション・メニュー用のヘッダーと「ハンバーガー」アイコンがあります。私が単にやろうとしているのは、利用可能な画面の約75％でロゴを表示し、右端にメニューアイコンがあります。レスポンシブ・ヘッダーのCSS配置

私はマスターのdivコンテナを持っていて、その中に私は2つのdivがあり、左側のdivにはロゴが、右側にはメニューアイコンがあります。何らかの理由で、同じdivコンテナ内のメニューを右に置くことができません。助言がありますか？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <style> 
     #container { 
     width: 100%; 
     max-width: 100%; 
     border: 0px; 
     margin: 0px; 
     padding: 10px; 
     background-color: blue; 
     } 
     #logoContainer { 
     width: 75%; 
     max-width: 75%; 
     border: 0px; 
     margin: 0px; 
     background-color: blue; 
     } 
     #logo { 
     width: auto; 
     max-width: 90%; 
     min-width: 90%; 
     } 
     #menu { 
     float: right; 
     } 
     #mobileMenu { 
     width: 100%; 
     background-color: green; 
     color: white; 
     display: none; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="logoContainer"> 
     <img id="logo" src="content/logo.png"/> 
     </div> 
     <div id="menu"> 
     <button type="button"><span>Menu</span></button> 
     </div> 
    </div> 
    <div id="mobileMenu">some content</div> 
    </body> 
</html>

出典

2016-11-29 Scott

display:inline-block;ロゴが表示されるようするためにメディアクエリを使用する方法について

#logoContainer{ 
 
    width:75%; 
 
    display:inline-block; 
 
    } 
 
#menu{ 
 
    width:25%; 
 
    display:inline-block; 
 
    text-align: right; 
 
    } 
 
#menu button{ 
 
    margin-right:10px 
 
    }

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<title></title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
 

 
<style> 
 
    #container { 
 
     width: 100%; 
 
     max-width: 100%; 
 
     border: 0px; 
 
     margin: 0px; 
 
     padding: 10px; 
 
     background-color: blue; 
 
    } 
 

 
    #logoContainer { 
 

 
     width: 75%; 
 
     max-width: 75%; 
 
     border: 0px; 
 
     margin: 0px; 
 
     background-color: blue; 
 
    } 
 

 
    #logo { 
 

 
     width: auto; 
 
     max-width: 90%; 
 
     min-width: 90%; 
 
    } 
 

 
    #menu{ 
 

 
     float: right; 
 
    } 
 

 
    #mobileMenu { 
 

 
     width: 100%; 
 
     background-color: green; 
 
     color: white; 
 
     display: none; 
 
    } 
 
    </style> 
 

 

 

 

 

 
</head> 
 
<body> 
 

 
<div id="container"> 
 
    <div id="logoContainer"> 
 

 
     <img id="logo" src="content/logo.png" /> 
 

 
    </div> 
 

 
    <div id="menu"> 
 
     <button type="button"> 
 
      <span> 
 
       Menu 
 
      </span> 
 
     </button> 
 

 
    </div> 
 

 
    </div> 
 

 
    <div id="mobileMenu"> 
 
    some content 
 

 
    </div> 
 

 

 

 
    </body> 
 

 

 
    </html>

出典

2016-11-29 20:33:38 jafarbtech

これは正しい方向に私を取得しているように見えます。しかし、私のメニューは一番上まで押し込まれ、ウィンドウのサイズを変えるとゆっくりと動き始めます。途中で常に縦に並べる方法はありますか？私はメニューのdivに垂直整列の中心を追加しましたが、それは仕事をしませんでした。 – Scott

垂直整列の場合は、垂直整列の中間ブローで正確な高さを与えることで追加できます。整列しないと、別のポストとしてその整列を作成し、他の人もそれに役立つようにします – jafarbtech

方法で#logoContainerと#menuの両方に特定の幅を与えます。私の例では、#logoの表示を "none"に設定しました。私のメディアクエリでは、ページが800pxの最小幅に達するたびに#logo要素が表示されます。

<div id="container"> 
<div id="logoContainer"> 

    <img id="logo" src="content/logo.png" /> 

</div> 

<div id="menu"> 
    <button type="button"> 
     <span> 
      Menu 
     </span> 
    </button> 

</div> 

</div> 

<div id="mobileMenu"> 
some content

#container { 
    width: 100%; 
    max-width: 100%; 
    border: 0px; 
    margin: 0px; 
    padding: 10px; 
    background-color: blue; 
} 

#logoContainer { 

    width: 75%; 
    max-width: 75%; 
    border: 0px; 
    margin: 0px; 
    background-color: blue; 
} 

#logo { 
    display:none; 
    width: auto; 
    max-width: 90%; 
} 

#menu{ 

    float: right; 
} 

#mobileMenu { 

    width: 100%; 
    background-color: green; 
    color: black; 
    display: none; 
} 

@media (min-width:800px){ 
    #logo{display:block;} 
}

出典

2016-11-29 20:43:56 trav

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 

    <style> 
     body{ 
      margin: 0px; 
     } 
     #container { 
      box-sizing: border-box; 
      width: 100%; 
      max-width: 100%; 
      border: 0px; 
      margin: 0px; 
      padding: 10px; 
      background-color: red; 
     } 

     #logoContainer { 
      float: left; 
      width: 75%; 
      max-width: 75%; 
      border: 0px; 
      margin: 0px; 
      background-color: blue; 
     } 

     #logo{ 
      max-width: 75%; 
      border: 0px; 
      margin: 0px; 
     } 

     #menu{ 
      height: 10px; 
      width: 25%; 
      float: right; 
      background: yellow; 
     } 

     #mybtn{ 
      float: right; 
     } 

     #mobileMenu { 
      display: inline; 
      background-color: green; 
      color: white; 
     } 
     </style> 
    </head> 
    <body> 

    <div id="container"> 

     <div id="menu"> 
       <button type="button" id="mybtn"> 
       <span> 
        Menu 
       </span> 
      </button> 
      <div id="mobileMenu"> 
      some content 
      </div> 
     </div> 

     <div id="logoContainer"> 
      <img id="logo" src="content/logo.png" /> 
     </div> 

    </div> 

     </body> 
     </html>

出典

2016-11-29 20:52:46 alifallahi

レスポンシブ・ヘッダーのCSS配置

答えて

関連する問題