css - 如何在页面的不同部分浮动以进行媒体查询

Question

如下图：

顶部的导航栏，页面两侧（左侧和右侧）的侧边栏以及夹在这些侧边之间的内容 div。桌面上的一切看起来都很棒。

为移动视图的单列布局输入媒体查询。现在布局是 Nav，左侧边栏在下面，内容在下面，右侧边栏在内容下面。

我的问题是如何在移动媒体查询的左侧边栏下方获取右侧边栏，但在桌面视图中保持不变，不触摸标记，只更改 CSS。这是一个指向小提琴的链接，以显示我的意思：

桌面布局的一切都在一个

@media only screen and (min-width: 768px) { }

CSS 块。

score 0 · Accepted Answer

我知道您要求“仅更改 CSS ”。因此，首先也许有一个具有新 cssorder功能的解决方案。但是，为什么不使用一种更简单的方法来稍微更改标记（DEMO）。

在下面的示例中，我删除了演示小提琴中的解决方案不需要的每一段代码。

您可以将右侧边栏移到内容元素之前，然后在桌面模式下左右浮动。

.sidebar {
    width: 20%;
}

.content {
    width: 60%;
    float: left;
}

.sidebar_right {
    float: right;
}

.sidebar_left {
    float: left;
}

在移动模式下，您删除浮动，以便 3 个元素回到它们原来的“标记位置”。

@media only screen and (max-width: 768px) {    
    .sidebar, .content {
        float: none;
        width: 100%;
    }
}

1 回答 1