html - 响应式设计和粘性 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;
}

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

希望这对您有所帮助!