Question

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

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

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

为了实现这一点，我尝试在CSS中使用媒体查询。在我的窗口低于700px的情况下，我希望菜单向右浮动并具有上边距。否则，我希望它是阻止，所以它将转到下一行。（我也使用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/

Answer 1

您不需要jQuery或媒体查询来使元素向下流动或保持垂直居中于页面。使用position和display属性进行更多操作。 This guide和this可能有所帮助。

Answer 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

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

2 个答案: