图片如下:
顶部的导航栏,页面两侧(左侧和右侧)的侧边栏和夹在这些边之间的内容 div。在桌面上一切看起来都很棒。
为移动 View 的单列布局输入媒体查询。现在布局是 Nav,左侧边栏在下方,内容在其下方,右侧边栏在内容下方。
我的问题是如何在移动媒体查询的左侧边栏下方获取右侧边栏,但在桌面 View 中将其保持不变,而不触及标记并仅更改 CSS。这是一个指向 fiddle 的链接,以显示我的意思:
桌面布局的一切都在
@media only screen and (min-width: 768px) { }
CSS block 。
最佳答案
我知道您要求“仅更改 CSS”。所以首先也许有一个新的 css 的解决方案 order
功能。但是为什么不使用更简单的方法来稍微更改标记 ( DEMO )。
在下面的示例中,我删除了在您的 fiddle 中演示解决方案不需要的所有代码。
您可以将右侧边栏移动到内容元素之前,然后在桌面模式下将它们向左/向右浮动。
.sidebar {
width: 20%;
}
.content {
width: 60%;
float: left;
}
.sidebar_right {
float: right;
}
.sidebar_left {
float: left;
}
在移动模式下,您移除 float 以便 3 个元素回到其原始“标记位置”。
@media only screen and (max-width: 768px) {
.sidebar, .content {
float: none;
width: 100%;
}
}
关于css - 如何在页面的不同部分 float 一个媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18552667/