3

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

这种设置的问题是，第二个“要粘”的旁白元素没有正确浮动，而是介于两者之间。

看实际操作：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>
4

2 回答 2

0

对于像这样的 jquery 是非常有帮助的。您可以获得窗口宽度，并根据该宽度编辑 css 以制作一两列。

于 2013-07-20T16:35:54.057 回答
0

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

我所做的唯一真正的改变是对我添加的 CSS 

aside{  
clear:right;
}

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

希望这可以帮助！

于 2013-07-20T13:00:44.990 回答