По какой-то причине нижняя часть моего макета, похоже, не центрирована, когда я установил левое и правое поле в авто
http://codepen.io/anon/pen/kvtcp
См. Пример.
С тех пор я изменил код с некоторым примером, который вы предоставили, но у меня есть еще одна проблема. Нижний div подтолкнул к левой и правой секции div?
Я использовал margin-top 20px, и ничего не происходит
С уважением
Это происходит потому, что у вас есть div, чтобы плавать влево, а экран - левый край. У ваших divs выше есть поля, оставшиеся для их заполнения.
Я бы предложил центр вашего контейнера.
http://codepen.io/anon/pen/sHvCA
body{
background:#90F;
}
#container {
width: 1000px;
height: 1200px;
padding-top: 25px;
overflow: auto;
margin:0 auto;
}
.header {
width: 800px;
height: 100px;
}
.leftimage {
float: left;
}
.middle {
height: 200px;
background:#FFF;
width: 800px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
.leftsection {
width: 300px;
background-color: #FFF;
height: 400px;
margin-top: 10px;
float: left;
margin-left: 100px;
}
.rightsection {
background-color: #0F0;
height: 400px;
width: 479px;
float: left;
margin-top: 10px;
margin-left: 20px;
margin-bottom: 20px;
}
.bottomsection {
clear:both;
height: 200px;
background: #FFF;
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
Просто удалите:
float:left
из класса.bottomsection и добавьте
clear:both;
вместо...
Это потому, что у вас есть float:left;
в теме. Удалите это и добавьте clear:both;
вместо.
Я бы рекомендовал обернуть левые и правые плавающие divs в другом div и применить overflow:hidden
на внешнем div для лучшего управления.
Он плавает без причины, и это приводит к появлению с левой стороны. Удалите это. На этот раз все должно быть хорошо, но вы не сможете увидеть его, потому что в нем ничего нет. Добавить overflow:hidden;
чтобы избежать этого. Тогда вы, возможно, захотите также дать некоторый запас. И, пожалуйста, имейте в виду, используйте поплавки мудрыми, не каждая проблема требует поплавка.
Хорошо, удалите float из вашего нижнего div.
.bottomsection {
height: 200px;
background: #FFF;
width: 800px;
/*float: left;*/
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
И в вашем HTML вы должны очистить поплавки с помощью
<div class="leftsection"></div>
<div class="rightsection"></div>
<div style="clear:both;"></div>
<div class="bottomsection"></div>
Это быстрое и грязное решение.
Вот хорошая ссылка, то есть о плавающих div's