1

サイドバーが背景の変更でオーバーフローするレイアウトで何かをしようとしています。

ここのjsfiddleで、私が現在持っているものを見ることができます。次の html に間違った順序で書かれているだけだと確信しています。最近の投稿の写真のすぐ下に濃い灰色を表示したいのですが、サイドバーを下に展開できるようにします。背景画像を使用してこれを行うことはできません。他のワードプレス テンプレート ページでは、より軽いコンテンツの長さが変わるためです。

ここに私が現在持っているコードがあります

<div id="main-content-container">
    <div class="container">
        <div class="row">
            <div id="main-content" class="span9">
                <div class="row">
                    <div id="featured-article" class="span9"><img src="http://placehold.it/715x340" /></div>
                </div>
                <div id="recent-posts" class="row">
                    <div class="span9">
                        <div class="row">
                            <div class="span9">
                                <h1>Recent Posts</h1>
                            </div>
                        </div>
                        <div class="row">
                            <div class="span3"><img src="http://placehold.it/220" /></div>
                            <div class="span3"><img src="http://placehold.it/220" /></div>   
                            <div class="span3"><img src="http://placehold.it/220" /></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="sidebar" class="span3">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo vitae quam accumsan semper. Vivamus varius orci posuere turpis congue semper vulputate eros congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eleifend magna in nulla semper vestibulum. Nulla a auctor odio. Vestibulum condimentum placerat tortor ut tempus. Morbi aliquet pellentesque sapien eu pharetra. Vivamus luctus, urna id pretium congue, dui nisi vestibulum nunc, non tincidunt justo dolor eget lacus. Aliquam condimentum, urna at blandit tristique, nulla felis porta erat, congue consectetur tortor mi vitae neque.

                  Nullam pellentesque, velit in convallis sagittis, enim enim viverra elit, ac tincidunt tellus elit eget dui. Donec sit amet odio eros. Nullam vitae pretium augue. Maecenas sit amet nisi ante, quis laoreet augue. Aliquam commodo suscipit bibendum. Duis imperdiet ornare magna, non porttitor lacus faucibus eget. Aenean viverra purus quis turpis fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc suscipit molestie nunc. Donec convallis mollis dui nec accumsan. Donec posuere ipsum ut nisl ornare eget sodales metus feugiat. Aliquam viverra, nunc nec malesuada hendrerit, velit nisl placerat augue, sed feugiat nisl turpis id risus. Nunc lobortis massa vitae justo fringilla vel condimentum lectus fermentum.
                </p>
            </div>
        </div>
    </div>
</div>

<div id="extra-body-container">
    This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.
</div>

サイドバーにフロートを設定しようとしましたが、うまくいきませんでした。私のhtmlのやり方でこれができるかどうか、cssを変更するだけでできるかどうかはわかりません。

私のコードで得られる結果

4

2 に答える 2

1

（あなたが言ったように）いくつかのことがうまくいかなかったようです

ここに修正されたフィドルがあります。 http://jsfiddle.net/3sBkk/1/

実際には、コンテンツをメインのラッピング要素に移動し、そこから行を作成し、スパンを 12 に調整し、サイドバーの z オーダーを設定してオーバーラップするようにするだけでした。

ここにコードを含める方法が正確にはわかりませんが、ここに原因があります。

          <div id="recent-posts" class="row">
                <div class="span9">
                    <div class="row">
                        <div class="span9">
                                <h1>Recent Posts</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                        <div class="span3">
                            <img src="http://placehold.it/220" />
                        </div>
                    </div>
                    <div class="row">
                       <div id="extra-body-container" class="span12">This part should fall right under the recent posts pictures and allow the sidebar to overflow on top of it.</div> 
                    </div>
                </div>
            </div>

編集: オーバーラップするサイドバーと 100% の幅の両方を実現するには、CSS をハックする必要があります。必ずしもそれを支持するわけではありませんが、それは可能ですか、確かに、何でも可能です。

http://jsfiddle.net/2Yet7/ (申し訳ありませんがとても醜いです)。

于 2013-04-15T19:51:57.563 に答える