为什么一些div的利润?

时间:2011-01-08 01:59:32

标签: html css xhtml layout

我需要帮助解释为什么边距应用于wrapperdiv中的底部两个框而不是顶部的大框。实施例

HTML:

<div id = "mainWrapperdiv"> 
    <div id = "maindiv">  
        <div id = "moveablediv" >
            <div id = "centerPointdiv"></div>
        </div>  
    </div> 
    <div id = "animationsdiv" class = "controls"></div>
    <div id = "optionsdiv" class = "controls"></div>
</div> 

的CSS:

*
{
    padding:        0px;
    margin:         0px;
}

div
{
    border:         1px solid;
}   

#mainWrapperdiv
{ 
    width:          1000px; 
    display:        block;
    margin-left:    auto;
    margin-right:   auto;
}     

/**** CSS approach to forcing the main containter div to include it's floated elements *****/   
#mainWrapperdiv:after
{
    content:            ".";
    display:            block; 
    clear:              both; 
    height:             0px; 
    visibility:         hidden;
}   
/***** end main containter div including floated elements **********************************/ 

#maindiv
{  
    width:          850px;  
    height:         500px;  
    border:         5px solid; 
    margin:         30px 0px 30px 70px; 
    float:          left;
} 

div.controls 
{ 
    width:          400px; 
    height:         200px; 
    border:         5px solid;    
    margin:         20px 20px 10px 70px;
    float:          left;
}

当顶部大框忽略左右边距时,应用底部框的边距是什么?

1 个答案:

答案 0 :(得分:0)

你有一个

border: 5px solid;

编辑:

你的#maindiv有一个浮动。试着清除它:

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

<div id = "mainWrapperdiv"> 
    <div id = "maindiv" class="clearfix">  
        <div id = "moveablediv" >
            <div id = "centerPointdiv">Center Point div</div>
        </div>  
    </div> 
    <div id = "animationsdiv" class = "controls">Animations div</div>
    <div id = "optionsdiv" class = "controls">Options div</div>
</div> 

并尝试在div中添加一些内容以供测试。

在div.control(底部的2个div)中设置边距:

div.controls 
{ 
    width:          400px; 
    height:         200px; 
    border:         5px solid;    
    margin:         20px 20px 10px 70px;
    float:          left;
}