响应式设计和粘性div

Question

我有一个两列的布局。如果满足特定的屏幕尺寸，它们就会断开，以便所有内容都显示在一列中。这就是为什么这些元素的顺序很重要，以确保在使用较小屏幕查看时首先显示正确的元素。

这种设置的问题是，第二个“被粘性”的元素没有正确地漂浮在右边，而是在中间的某个位置。

请参阅实际操作：http://jsfiddle.net/zn3qz/

       .main {
            width: 60%;
            margin-right: 5%;
            float: left;
        }
        aside {
            width: 35%;
            float: right;
        }    

    <section class="main">Header</section>
    <aside>picture</aside>
    <aside>to be made sticky</aside>
    <section class="main">List of things</section>

Answer 1

根据您的需求，这里有另一个变体：http://jsfiddle.net/panchroma/TtT6h/

我所做的唯一真正的更改是对CSS进行了修改，其中添加了

aside{  
clear:right;
}

这确保了第二个侧边清除了第一个侧边，并且可以完全向右滑动。

希望这能有所帮助！

Answer 2

对于这样的事情，jquery是非常有用的。您可以获取窗口宽度，并根据该宽度编辑css，使其成为一列或两列。