почему поля для некоторых div? - PullRequest
Новая
       15

почему поля для некоторых div?

0 голосов
/ 08 января 2011

Мне нужна помощь, чтобы объяснить, почему поля применяются к двум нижним полям в обертке, а не к верхнему большому полю.Пример

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 голосов
/ 08 января 2011

Поскольку у вас есть 

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;
}
...