媒体查询将 div 从块切换到内联答案

【问题标题】：Media queries switch div from block to inline媒体查询将 div 从块切换到内联
【发布时间】：2014-03-18 21:18:34
【问题描述】：

我对基于 div 的 css 很陌生，所以我想我可能在这里问了一个误导性的问题。

在我的页面中，我希望在页面中间有一个 div。在这个栏中是一个左对齐的徽标图像，以及与徽标内联但向右浮动的主导航菜单。

当页面宽度减小到某个阈值以下时，我希望导航菜单直接出现在徽标下方。

为了实现这一点，我尝试在我的 CSS 中使用媒体查询。在我的窗口低于 700 像素的情况下，我希望菜单向右浮动并具有上边距。否则，我希望它被阻塞，所以它会转到下一行。（我也在使用 jQuery 来保持中间栏在页面高度上居中）。

我的媒体查询似乎为初始窗口宽度提供了正确的效果，但是当我将窗口从下方扩展到 700 像素以上时，导航菜单仍保留在下一行。它不与徽标内嵌显示。

我是不是用错了方法，是否应该在我的 CSS 中指定其他样式，还是我根本不了解显示样式？

提前致谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<script
    src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
    function onResize() {
        var bar_height = $("#middlebar").height();

        $("#middlebar").css("top",
                ($(window).height() - bar_height) * .45 + "px");

    }

    $(document).ready(function() {
        onResize();
        $(window).on("resize", onResize);
    });

</script>

<style type="text/css">

#middlebar {
    background: #AAAAFF;
    padding-top: -5px;
    padding-bottom: -10px;
    left: 0px;
    right: 0px;
    position: absolute;
    display: inline;
}

#navmenu {
    font-family: sans-serif;
    font-size: 1.08em;
}

@media ( max-width : 700px) {
    #navmenu {
        display: block;
        float: none;
        margin-top: 0px;
    }
}


@media ( min-width : 701px) {

#navmenu {
    display: inline;
    float: right;
    margin-top: 16px;
}


}
</style>
</head>

<body>

    <div id="middlebar">
        <img src="logo.png" height="60px" id="logoimg"></img>
        <div id="navmenu">
            <span> 
                <a href="#">home</a>
            </span> 

            <span>
                <a href="#">specials</a>
            </span> 

            <span>
                <a href="#">about</a> 
            </span> 
        </div>
    </div>

</body>
</html>

查看现场示例： http://jsfiddle.net/Gpk4c/

【问题讨论】：

您的问题令人困惑。基于live版本，你需要做什么？也许张贴一张图片来解释预期的行为。在小提琴中，当我更改渲染结果的大小时，菜单内容会向右浮动。

标签： jquery responsive-design media-queries

【解决方案1】：

您不需要 jQuery 或媒体查询来使元素向下流动或保持垂直居中于页面。更多地使用position 和display 属性。 This guide 和 this 或许可以提供帮助。

【讨论】：

链接不是答案。关于 SO 的答案预计是独立的。请review this meta question 并在您的答案中添加足够的细节，使其不完全依赖外部链接。
我认为我的问题的症结可能是当我有一个大屏幕宽度时，我希望导航栏右对齐，但是当它的宽度较小时，我想导航栏左对齐。

【解决方案2】：

看起来你只需要浮动图像。您的 HTML 与图像的顺序首先使浮动导航菜单位于图像下方，即使它是向右浮动的。以下额外的 CSS 使链接与较大尺寸的图像保持一致：

img {
  float: left;
}

然后为了让图片和链接以更小的尺寸堆叠，可以添加clear规则：

@media ( max-width : 700px) {
  #navmenu {
    display: block;
    float: none;
    margin-top: 0px;
    clear: both; /* This kicks the nav menu below the image */
  }
}

Here's the updated fiddle

【讨论】：