Question

我有一个复杂的标题，有许多元素随浮动左右移动。它们在桌面上运行良好。但是我希望实现一个响应视图，其中导航元素被移动到下一行。

这是一张展示的图片：

enter image description here

问题是如何将菜单元素（位于中间）推到下一行，而其他菜单元素保持其位置。

以下是全视图标题的极其基本的标记表示：http://jsfiddle.net/aAG2s/

 <header class="clearfix">
    <div class="pull-left">Button 1</div>
    <div class="pull-left">Logo</div>
    <div class="pull-left menu">Menu</div>

    <div class="pull-right">Button 2</div>  
</header>

编辑澄清：

我正在寻找一种不改变html标记顺序的方法。

Answer 1

使用媒体查询：Fiddle

     header {
     border: 1px solid black; 
     padding-bottom: 50px;}
.pull-left, .pull-right {
     border: 1px solid red; 
     padding: 5px; margin: 5px}
.menu {
     border: 1px solid blue;
     position: absolute;
     margin-top: 50px;
     right: 0;
     left: 0px;}
@media (min-width: 768px) {
    .menu {
         position: relative;
         margin: 5px;
         width: auto;
     }
     header {
          padding-bottom: 0px;
}
}

Answer 2

喜欢这个吗？

http://jsfiddle.net/aAG2s/2/

CSS

header {border: 1px solid black}
.pull-left, .pull-right {border: 1px solid red; padding: 5px; margin: 5px}
.menu {border: 1px solid blue}
.pull-left{float:left;}.pull-right{float:right;}
@media screen and (max-width: 1024px){
    .menu{width:98%;}

}

HTML

<header class="clearfix">
        <div class="pull-left">Button 1</div>
        <div class="pull-left">Logo</div>


        <div class="pull-right">Button 2</div><div class="pull-left menu">Menu</div>
    </header>

Answer 3

将菜单放在HTML的最后，然后清除它周围的浮动元素：

@media screen and (max-width:640px){
    .menu{
        clear: both;
    }
}

JSFIDDLE DEMO：http://jsfiddle.net/aAG2s/4/ 我添加了红色背景只是为了强调一点。

Answer 4

也许使用jquery可以帮助......

http://jsfiddle.net/aAG2s/6/

p = $(".menu").detach();
$("#MainHeader").append(p);

Answer 5

试试这个：http://jsfiddle.net/aamir/aAG2s/7/

header {
    border: 1px solid black;
    padding: 5px;
}
.pull-left, .pull-right {
    border: 1px solid red;
    padding: 5px;
    margin-right: 5px;
}
.pull-right {
    margin-right:0;
}
.menu {
    border: 1px solid blue
}
.pull-left {
    float:left;
}
.pull-right {
    float:right;
}
@media screen and (max-width: 600px) {
    .menu {
        width:100%;
        margin-top: 5px;
    }
    .pull-right {
        margin-top: -69px;
    }
}

Answer 6

试试这个css

header {border: 1px solid black;position:relative;}
.pull-left, .pull-right {border: 1px solid red; padding: 5px; margin: 5px}
.menu {border: 1px solid blue;}

@media screen and (max-width:768px){
    header{min-height:100px;}
    .menu{        
        float:right !important;
        width:99%;
        position:absolute;
        top:50px;
        left:0;
    }
}

将浮动左右浮动的元素移动到下一行

6 个答案: