1

这是我想要完成的图像：http: //i.imgur.com/XKPuV.png

我想要一个带边框的外部容器和一个灰色背景的内部容器。内部容器中有两个块：左边的文本，右边的图像（两边的元素都不重要——它们可以是任何东西）。很基本的东西。

使用下面的代码，我的两个 div 跨越 6 列分开（这是它的样子：http: //i.imgur.com/BEIVl.png）。解决此问题的最佳方法是什么？

<div class="container" style="border: 1px solid gray;height:490px;margin-top:20px;">
<div id="inner-container" style="background:gray;margin:5px;">
    <div class="row">
        <div class="span6">
            <p style="margin:5px;">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </p>
        </div>
        <div class="span6">
            <p style="margin:5px;">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </p>
        </div>
    </div>
</div>

4

1 回答 1

0

问题是您不能使用 spanX 类指定内联边距和填充，因为它们会覆盖 boostrap 自己的填充/边距设置（这就是为什么第二个 div 位于下一行。我建议您创建您需要的内容而不使用内部 div 的 spanX 定义。参见小提琴：http: //jsfiddle.net/periklis/KGMEF/1/

于 2012-06-04T18:53:52.337 回答