响应式设计和粘性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以生成一列或两列。