1

我正在寻找对我的侧边栏溢出背景更改的布局做一些事情。

您可以在此处的 jsfiddle中看到我目前拥有的内容。我确信我只是在我的以下 html 中写了一些乱七八糟的东西。我希望深灰色直接显示在最近的帖子图片下方，但允许侧边栏向下扩展。我不能只使用背景图像来执行此操作，因为较轻内容的长度会在其他 wordpress 模板页面上发生变化。

这是我目前拥有的代码

<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 回答
1

extra-body-container 上方的行尝试将其设置为 margin-left: -100% 沿 w/body-bg.png 然后在 extra-body-contain 上将 margin-left 设置为 50% 并将宽度设置为 100 %

在这里查看：http: //jsfiddle.net/3sBkk/9/show/

<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 class="row" style="margin-left: -100%; background: url('../img/extra-body-bg.png') #AAAAAA repeat-x top center;">
                        <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>
        </div>
        <div id="sidebar" class="span3" style="z-index: 999;">
            <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>

希望这有助于或至少让您朝着正确的方向前进。

于 2013-04-16T20:03:38.273 回答