0

これらの 2 つのスパンにまたがる背景を実現するために、1 つのコンテナーに 2 つのスパンを配置しようとしています。私はjsfiddleの例を作成しました。以下を参照してください

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

問題は、div がこれら 2 つのスパンにまたがっていないように見えることです。代わりに、2 つのスパンの上に配置されます。背景を 2 つのスパンに個別に設定すると、それらの間にガターが表示されますが、これは表示されません。また、div が適切に閉じられていないかどうかを確認しようとしましたが、役に立ちませんでした。

ジャンクを減らして更新: http://jsfiddle.net/hsEWG/5/

4

3 に答える 3

0

クリアしないためです。clearfixあなたの問題をクリアします!

clearfixにクラスを追加するだけ.bgcolorblackです。から出てくるメニューがある場合はdivoverflow: 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%;
}

2番目のフィドルが更新されました:http://jsfiddle.net/hsEWG/7/

スペースが必要ない場合は、ラッパーにクラスを指定しspan10ます。そしてCSSでは:

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

フィドル: http: //jsfiddle.net/hsEWG/9/

于 2012-09-18T08:42:11.213 に答える
0

span10 のクラスを持つように div を変更すると、うまくいくと思います:

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

于 2012-09-18T08:27:26.993 に答える
0

ライブデモ

このCSSを追加

.bgcolorblack{
overflow:hidden;
}

ライブデモ

于 2012-09-18T08:27:47.787 に答える