0

ここでこのhtml/cssの問題を示すフィドルがありますhttp://jsfiddle.net/mjmitche/T6PBn/9/。

黒のナビゲーションバーから下に移動しようとしているクラス「mainmeal」(フィドルの白い背景) を持つ a の div があります。div の幅は、ページの本文よりも狭いです。ただし、mainmeal div に上余白を配置してブラウザから押し下げると、上余白によって作成されたスペースが白くなり (つまり、「mainmeal」の css によってスタイル設定されます)、ボディの幅全体に広がります。 . これがなぜ起こっているのか、そしてそれを修正する方法を説明できますか？

私が欲しかったのは、マージンによって作成されたスペースが、含まれている div "main" の css を取得することでした。

ありがとう

CSS

#header{
font-size: 24px;
background-color: #000; 
min-height: 25px;
 font-weight: bold;


}

#main {
   min-height: 300px;
   background-color: #b4db9b;
   width: 500px;
   position: relative;

}

.miracle {
    color: #1e6023;

}
.meal{
    color: #fff;

}

.mainmeal{
    background-color: #fff;
    width: 400px;
    height: 150px;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;


}

HTML

<div id="header">

    <span class="miracle">Miracle</span><span class="meal">Meal</span>

</div>

<div id="main">
    <div class="mainmeal">

       Main Meal

    </div>
    <div id="olddeals">
        <div class="column1">
        </div>
        <div class="column2">
        <div>
        <div class="column3">
        </div>

    </div>

</div>
4

2 に答える 2

1

これで問題が解決するはずです：http：//jsfiddle.net/T6PBn/11/

#main {
   min-height: 300px;
   background-color: #b4db9b;
   width: 500px;
   position: relative;
   /* introduce this */
   padding-top: 20px;
}

.mainmeal{
    background-color: #fff;
    width: 400px;
    height: 150px;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;
}
于 2013-02-10T02:11:15.107 に答える
0

メインミールdivの高さは150ピクセルであるため、150ピクセルのブロック全体が白になります。メインミールの高さを低くすると、白いボックスが小さくなります。

于 2013-02-10T02:12:39.490 に答える