响应式标题的 CSS 定位答案

【问题标题】：CSS positioning for responsive header响应式标题的 CSS 定位
【发布时间】：2016-11-29 20:26:11
【问题描述】：

我有一个带有图像的标题和一个用于移动导航菜单的“汉堡包”图标。我只是想在可用屏幕的大约 75% 处显示我的徽标，最右边的菜单图标。

我有一个主 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>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

使用display:inline-block; 为#logoContainer 和#menu 指定特定宽度

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

【讨论】：

这似乎让我朝着正确的方向前进。然而，我的菜单一直被推到顶部，当我改变窗口大小时，它慢慢开始向下移动。有没有办法让它总是在中间垂直对齐？我在菜单 div 中添加了垂直对齐中心，但它不起作用。
对于垂直对齐，您可以通过给出与垂直对齐中间兄弟的确切高度来添加...如果您没有对齐，请将该问题作为单独的帖子创建，以便其他人也可以帮助它跨度>

【解决方案2】：

如何使用媒体查询使徽标出现。在我的示例中，我将 #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;}
}

【讨论】：

【解决方案3】：

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

【讨论】：