Question

我正在尝试为网站的标题构建一个菜单。我正在尝试以最干净的方式编写代码并使用媒体查询进行一些切换。

我创建了一个演示：Demo Fiddle

我会解释一下我正在尝试做什么并向你们提供智能解决方案？

我有三个步骤。手机，平板电脑和桌面，菜单会在两个不同的页面上有所不同，但只是略有不同但我会解释清楚。

菜单由3个部分组成，左侧为导航栏，中间为徽标，右侧为按钮。第1页将包含所有三个，但第2页中间没有徽标。

我遇到的问题是我设计的需要导航器从左侧（移动/平板电脑视图）切换到右侧（桌面），徽标从中间（移动/平板电脑）切换到左侧（桌面）所有媒体查询和CSS？

你们对于解决这个问题的最佳方法有什么想法或建议，因为我目前有点难过吗？

演示会很棒吗？

这也是我的代码：

<div class="container">

    <div class="header_row">

        <div class="header_col1">

            <nav>nav</nav>

         </div>

        <div class="header_col2">

            <div class="logo_hub">logo</div>

        </div>

        <div class="header_col3">

            <div class="login">login</div>

        </div>

    </div>

</div>

Answer 1

您希望桌面上的登录部分发生什么？

无论如何，这就是我提出的：

CSS：

*, *:before, *:after{
    box-sizing: border-box;
}
div{ /* you can omit these styles, they're just here so you can see the divs in my example! */
    background: #EEE;
    border: solid 1px #FFF;    
}

.header_row{
    position: relative;    /* if you position the parent element relative, then all child elements positioned absolute will be absolutely positioned *relative* to the parent element!  Magic! */
}
.header_col1{
    float: left;
}
.header_col2{
     position: absolute;
     margin: 0 auto;
     left: 0;
     right: 0;
    width: 100px;
}

.header_col3{
     float: right;   
}

/* I use < 1024px for tablet view, personally... */
@media screen and (min-width: 1024px){
    .header_col1{
        float: right;
    }

    .header_col2{
        position: relative;
        float: left;
    }

    .header_col3{
        display: none; /* you never mentioned what happens with this now...*/
    }

}

http://jsfiddle.net/SeanKendle/udjn5kzL/2/

一种更智能的方式来显示响应式菜单

1 个答案: