html - 跨越两个跨越 div 的背景，引导程序

Question

我试图将两个跨度放在一个容器中，以实现跨越这两个跨度的背景。我做了一个 jsfiddle 例子，见下文

http://jsfiddle.net/hsEWG/1/

问题是 div 似乎没有跨越这两个，而是位于两个跨度之上。如果我分别为两个跨度设置背景，我会得到它们之间的排水沟，这不应该是可见的。我还尝试定位 div 是否未正确关闭但无济于事。

更新了更少的垃圾：http: //jsfiddle.net/hsEWG/5/

Answer 1

将 div 更改为 span10 类，我认为它可以工作：

http://jsfiddle.net/hsEWG/3/

Answer 2

现场演示

添加这个CSS

.bgcolorblack{
overflow:hidden;
}

现场演示

Answer 3

是因为没有清零。clearfix解决你的问题！

只需clearfix在.bgcolorblack. 如果您有来自 的菜单div，overflow: hidden;将对其进行修剪。

<div class="bgcolorblack clearfix">

小提琴：http: //jsfiddle.net/hsEWG/6/

一般TBS自带clearfix类。但是如果你发现它没有被包含，你可以很好地将它复制到你的 CSS 中：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

第二小提琴更新：http: //jsfiddle.net/hsEWG/7/

如果您不需要空间，请给包装器一个 class span10。在 CSS 中：

.bgcolorblack.clearfix.span10 {margin-left: 0;}

小提琴：http: //jsfiddle.net/hsEWG/9/