html - 侧边栏由两部分组成的流体/固定设计

我正在尝试构建一个由三个主要块组成的移动就绪设计，这三个主要块是广告块，内容块和侧边栏块（加上页眉和页脚，但这些对于此问题并不重要）。

想法是使广告和侧边栏具有固定的宽度（250px），并与容器块的右侧对齐，而内容应为流畅的并在左侧。在移动设备上，我需要打破此设计并将块彼此层叠，以便ad-> content-> sidebar width 100％widths

我有这样的想法：


Desktop
Mobile


我见过像this one这样的解决方案，但是它们都使用相对大小（以百分比为单位），而不是固定的“侧边栏”宽度。

最佳答案

媒体查询允许您说以某个Windows大小运行此CSS。因此，例如：

.ads {
    float: right;
    width: 250px;
    margin-left: 5px;
}
@media screen and (max-width:500px) {
    .ads {
        width: 250px;
        margin: 0 auto;
    }
}

因此，使用此功能您可以根据屏幕尺寸控制CSS

例：

http://jsfiddle.net/link2twenty/kufbbodr/

更改结果框的宽度以查看其工作原理

关于html - 侧边栏由两部分组成的流体/固定设计，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33871262/