0

私はそのような構造を持っています

<div class="contentWrapper">
<div class="left_side"></div>
<div class="right_side"></div>
</div>

私の contentWrapper クラスには次のスタイルがあります。

.contentWrapper {
margin: 0px auto;
padding: 0px;
width: 990px;
text-align: left;
background-color: #FFF;
box-shadow: 0 2px 7px rgba(0,0,0,0.25);
position: relative;
z-index: 20;
}

ただし、背景色と境界線は表示されません。

私の left_side と right_side クラスには、スタイルとしてこれがあります:

.left_side {
width: 630px;
float: left;
padding: 0 10px 0;
}

.right_side {
width: 300px;
float: right;
margin: 0 20px 20px;
}

左側または右側のいずれかでフロートをオフにすると、背景と境界線が表示されます..これを修正するにはどうすればよいですか?左右の両方に背景と境界線を付ける必要があります。

ありがとう、J

4

1 に答える 1

2

css のクラス名が間違っています。HTML では left_side と right_side と呼ばれますが、css では right_column と left_column があります。

フィドル

.contentWrapper {
    margin: 0px auto;
    padding: 0px;
    width: 990px;
    text-align: left;
    background-color: #FFF;
    box-shadow: 0 2px 7px rgba(0,0,0,0.25);
    position: relative;
    z-index: 20;
    overflow: hidden; /* THIS /*
}

これにより、フロートがクリアされ、基本的に修正されます。要素をフロートすると、通常のレイヤーから飛び出し、親がその中に何もないかのように動作します。

于 2013-07-29T14:55:07.647 に答える