Question

我有一个常规布局，看起来像这样： enter image description here

此布局使用CSS浮动完成。

当我切换到移动设备时，我希望我的布局能够做到这一点：

enter image description here

也就是说，我希望我的侧边栏低于内容。我可以使用绝对定位来做到这一点，但我想知道，有没有办法使用浮动来做到这一点，如果我的内容改变侧边栏将调整高度差？

Answer 1

这是我将如何做到的。 DIV浮动在您的桌面版本上，但在移动设备上显示在彼此的顶部（默认block显示）。

CSS：

#sidebar {
    float: left;
    width: 30%;
}

#content {
    float: right;
    width: 70%;
}

.mobile #sidebar,
.mobile #content {
    float: none;
    display: block;
    margin-bottom: 15px;
}

标准HTML：

<body>
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>

移动HTML：

<body class="mobile">
<div id="content">
...
</div>
<div id="sidebar">
...
</div>
</body>

Answer 2

假设：

这两个元素有一个共享的父元素
内容div显示在源

您不必更改源顺序，默认情况下可以使用浮点数来实现此目的。

也就是说，在桌面布局中：

#content {
   float: right;
   width: 60%;
}

#sidebar {
   float: left;
   width: 40%;
}

然后，对于移动设备（使用媒体查询或其他任何机制）：

#content, #sidebar {
   float: none;
   clear: both;
 }

Answer 3

媒体查询，flex容器及其order属性应该可以解决问题：

@media(max-width:767px) {
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    .content {
        order: 1;
    }
    .sidebar {
        order: 2;
    }
}

确保将max-width值替换为您自己的移动断点。

Browser support for flex现在也相当不错。

Answer 4

在您的移动媒体查询中设置float:none。

Answer 5

实际上，我想设置第一个布局的布局，所以我曾经使用过：

        .iconHome{
            float: left;
            border: 1px solid #73AD21;
            width: 50%;
            height: 100px;
            background-color: aqua;

            /*margin: 50px;*/
        }

    <div class="iconHome1">


    </div>

    <div class="iconHome1">


    </div>

结果是第二个布局!!!因此，我认为默认＆＃34;浮动：左＆＃34;不在手机上设置。你可以使用上面的方式。希望能帮到你

修改

我尝试了一些代码：

.iconHome1{ float: left; border: 1px solid #73AD21; width: 50%;/*185px*/ height: 200px; background-color: aqua; margin: 0;/*0 0 0 -7px*/ /*clear: left;*/ }

这意味着＆＃34;宽度＆＃34; ＆安培; ＆＃34;余量＆＃34;将影响布局，但你必须设置＆＃34; float：left＆＃34;。修复＆＃34;宽度：49％＆＃34;，结果：

CSS浮动，改变移动布局的顺序？

5 个答案: