3

私は2列のレイアウトを持っています。特定の画面サイズが満たされると、すべてが 1 つの列に表示されるように壊れます。そのため、小さな画面で表示したときに適切な要素が最初に表示されるようにするには、これらの要素の順序が重要です。

このセットアップの問題は、2 番目の「スティッキーにする」aside-element が適切に右に浮いておらず、その中間にあるということです。

実際に見てください：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

要件に応じて、別のバリエーションがあります: http://jsfiddle.net/panchroma/TtT6h/

私が行った唯一の実際の変更は、追加した CSS です。 

aside{  
clear:right;
}

これにより、2 番目の脇が最初の脇をクリアし、完全に右にスライドできるようになります。

お役に立てれば！

于 2013-07-20T13:00:44.990 に答える
0

このような場合、jquery は非常に役立ちます。ウィンドウの幅を取得し、その幅に基づいて css を編集して 1 列または 2 列にすることができます。

于 2013-07-20T16:35:54.057 に答える