нижний div не по центру

Question

нижний div не по центру

0

По какой-то причине нижняя часть моего макета, похоже, не центрирована, когда я установил левое и правое поле в авто

См. Пример.

С тех пор я изменил код с некоторым примером, который вы предоставили, но у меня есть еще одна проблема. Нижний div подтолкнул к левой и правой секции div?

Я использовал margin-top 20px, и ничего не происходит

С уважением

user2743926 20 сен. 2013, в 17:03

Источник

Теги:

html

css

5 ответов

3

Просто удалите:

float:left

из класса.bottomsection и добавьте

clear:both;

вместо...

ReDEyeS 20 сен. 2013, в 13:04

0

Это потому, что у вас есть float:left; в теме. Удалите это и добавьте clear:both; вместо.

Я бы рекомендовал обернуть левые и правые плавающие divs в другом div и применить overflow:hidden на внешнем div для лучшего управления.

Jacob Raccuia 20 сен. 2013, в 13:01

0

Он плавает без причины, и это приводит к появлению с левой стороны. Удалите это. На этот раз все должно быть хорошо, но вы не сможете увидеть его, потому что в нем ничего нет. Добавить overflow:hidden; чтобы избежать этого. Тогда вы, возможно, захотите также дать некоторый запас. И, пожалуйста, имейте в виду, используйте поплавки мудрыми, не каждая проблема требует поплавка.

Kuzgun 20 сен. 2013, в 13:00

0

Хорошо, удалите 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

http://css-tricks.com/all-about-floats/

chris 20 сен. 2013, в 12:52

1

работал как шарм. Это плавание - самая трудная часть для меня, чтобы привыкнуть :(. Спасибо всем, кто отправил, чтобы помочь мне. Да благословит Бог
user2743926 20 сен. 2013, в 14:55
0

Я бы не использовал встроенный CSS, но это мог быть только я ...
Keven 20 сен. 2013, в 14:58

Ещё вопросы

работал как шарм. Это плавание - самая трудная часть для меня, чтобы привыкнуть :(. Спасибо всем, кто отправил, чтобы помочь мне. Да благословит Бог
Я бы не использовал встроенный CSS, но это мог быть только я ...

DreamTeK · Accepted Answer · 2013-09-20T12-03-00.000Z

Это происходит потому, что у вас есть 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>

да, это должно быть лучшим решением!
Я изменил код, но когда я делаю, мой нижний div перемещается вправо вверх в левый и правый раздел div. codepen.io/anon/pen/kvtcp
Маржинальная вершина может быть немного ненадежной. Используйте поле margin на div выше. .leftsection {margin-bottom: 20px; }
Привет DreamTek у меня и ничего не происходит? Есть идеи?
выглядит нормально по вашей ссылке?
Я использовал код, который вы мне дали, и работал нормально, но когда я печатал сам, я что-то упустил