margin-top под плавающим div css

У меня есть div под float:right div. По какой-то причине верхнее поле не может быть применено к первому div. вот css

#over{
  width:80%;
  float:right;
  color:#e68200; 
 }

#under{
  clear:both;
  background:url(../images/anazitisi.png) no-repeat;  
  margin:10px auto; /*does not work!!!*/
  width:95px;
  height:20px;
 }

Кто-нибудь знает, что происходит?


css margin
person pavlos    schedule 13.07.2010    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Плавающие элементы как бы выходят за пределы обычного макета, поэтому обычно не влияют на другие объекты, которые не являются плавающими, как они. Конечно, поведение float в разных браузерах отличается, но это общая идея.

После плавающего div вам понадобится что-то (например, пустой div), которое очистит поплавок (имеет style="clear:both;").

Однако, как я уже сказал, поведение браузера по-прежнему будет различаться в зависимости от того, откуда он решит отсчитывать маржу. Конечно, есть обходные пути для этого. Дополнительную информацию см. на этой странице.

person themightyjon    schedule 13.07.2010

arrow_upward
1
arrow_downward

Решение без лишних <div>

То, что вы видите, это проблема схлопывания вертикальных полей в CSS3. Эта проблема будет легче решена с появлением CSS4. Между тем, не добавлять дополнительный <div>, как бы просто это ни звучало, не рекомендуется. Как правило, лучше строго разделять содержание и представление.

Вот как я решил эту проблему на своем веб-сайте. Решение использует отсутствие коллапса вертикального поля внутри встроенных блоков.

#under должен содержать как минимум следующие элементы:

#under {
    clear: both;
    display: inline-block;
    width: 100%;
}
person Serge Stroobandt    schedule 10.04.2015

arrow_upward
0
arrow_downward

попробуйте этот css snipe, я думаю, это решит вашу проблему.

  #over{
  width:80%;
  float:right;
  color:#e68200; 
  background-color:#234fdd;
  height:auto;
  margin-bottom:30px;
}

#under{
 clear:both;
 background:url(../images/anazitisi.png) no-repeat;  
 margin:auto;
 width:200px;
 height:20px;
 background-color:#23ffff;
}
person Jaison Justus    schedule 13.07.2010