Позиционирование CSS для ответного заголовка

У меня есть заголовок с изображением и значок «гамбургер» для мобильного меню навигации. То, что я просто пытаюсь сделать, отображает мой логотип примерно на 75% доступного экрана с иконкой меню в крайнем правом углу.Позиционирование CSS для ответного заголовка

У меня есть главный контейнер div, а затем внутри него у меня есть 2 divs, у которых есть логотип в левом 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

дают определенную ширину в обоих #logoContainer и #menu с 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

Как насчет использования медиа запросов, чтобы сделать логотип появится. В моем примере я установил отображение на #logo «none». С помощью моего медиа-запроса, когда страница достигает минимальной ширины 800 пикселей, будет отображаться элемент #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 для ответного заголовка

ответ

Смежные вопросы