0

我有一个小提琴在这里http://jsfiddle.net/mjmitche/T6PBn/9/显示这个 html/css 问题。

我有一个带有“mainmeal”类的div（小提琴中有白色背景），我正试图从黑色导航栏向下移动。div 的宽度比页面的主体窄。但是，当我在 mainmeal div 上放置一个顶部边距以将其从浏览器中向下推时，顶部边距创建的空间是白色的（即由 css 设置为“mainmeal”的样式）并且它扩展了身体的整个宽度. 你能解释一下为什么会发生这种情况以及如何解决吗？

我想要的是由边距创建的空间来获取包含 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

mainmeal div 的高度为 150 像素，因此整个 150 像素的块都是白色的。如果你降低主餐的高度，你会得到一个更小的白盒子。

于 2013-02-10T02:12:39.490 回答