CSS: Не принимайте весь div

Question

Я создал div, содержащий дочерние div. Предполагается, что дочерние divs имеют тот же background-color, что и главный div (<div id="how-it-works">), но он не работает, и я не уверен, почему.

Любые предложения?

#how-it-works{ 
 
    background-color: #eeeeee; 
 
    padding-top: 50px; 
 
} 
 
#how-it-works h3{ 
 
    font-family: gill sans; 
 
    letter-spacing: 10px; 
 
    font-size: 20px; 
 
    font-weight: 500; 
 
    text-align: center; 
 
    padding-top: 0px; 
 
    padding-bottom: 10px; \t \t 
 
} 
 
#details-wrapper{ 
 
    padding-top: 50px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    background-color: #eeeeee; 
 
} 
 
#feature-one{ 
 
    width: 30%; 
 
    float: left; 
 
    margin-right: 30px; 
 
} 
 
#feature-one p { 
 
    font-family: times; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    text-align: justify; 
 
}   
 
#feature-one img { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#feature-two{ 
 
    width: 30%; 
 
    float: left; 
 
    margin-left: 20px; 
 
} 
 
#feature-two p{ 
 
    font-family: times; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    text-align: justify; 
 
} 
 
#feature-two img{ 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
#feature-three{ 
 
    width: 30%; 
 
    float: right; 
 
    margin-left: 10px; 
 
} 
 
#feature-three p { 
 
    font-family: times; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    text-align: justify; 
 
} 
 
#feature-three img{ 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div id="how-it-works"> 
 

 
    <h3>TITLE</h3> 
 
    <p>Text.</p> 
 
    
 
    <div id="details-wrapper"> 
 
    \t <div id="feature-one"> 
 
      <img src="images/bild.jpg"> 
 
    \t  <h4>TITLE</h4> 
 
    \t  <p>Text.</p> 
 
     </div> 
 
    \t <div id="feature-two"> 
 
    \t  <img src="images/bild.jpg"> 
 
    \t  <h4>TITLE</h4> 
 
    \t  <p>Text.</p> 
 
    \t </div> 
 
    \t <div id="feature-three"> 
 
    \t  <img src="images/bild.jpg"> 
 
    \t  <h4>TITLE</h4> 
 
    \t  <p>Text.</p> 
 
    \t </div> 
 
    </div> 
 
</div> 
 

 
     

Answer 1

три «особенность -» - плавающие.

Вы можете установить как это работает overflow:hidden.

Answer 2

Попытка добавления clearfix к #how-it-works контейнера

#how-it-works:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

Три признака <div> с плавающей. Это выводит их за пределы обычного потока документов, что не влияет на высоту контейнера #how-it-works. Clearfix, или в этом случае, как упоминал Джонас Груманн, добавляет, что overflow: hidden решает это. Однако clearfix является лучшим вариантом, если вам нужно, например. a box-shadow на элементе.

Если вы осмотрите #how-it-works контейнер в течение Devtools пример в Chrome вы можете легко увидеть это, особенность <div> s не в синей накладкой, которая показывает размеры #how-it-works контейнера.

Answer 3

Вы также можете сделать класс .clear{ clear:both; } и использовать его под элементами #feature-*.

См скрипку: fiddle

Answer 4

замените код ниже:

#how-it-works{ 
    background-color: #eeeeee; 
    padding-top: 50px; 
} 

с новым кодом:

#how-it-works{ 
    display: block; 
    float: left; 
    width: 100%; 
    background-color: #eeeeee; 
    padding-top: 50px; 
} 

Примечание: главный родительский DIV должен установить 'дисплей' блок и «ширина «100% и исправлена ​​проблема.

Answer 5

Удалить свойство поплавка из последнего сНу элемента (# функция-три):

#feature-three { 
    margin-left: 10px; 
} 

Это заставит родительский DIV признать по крайней мере, высоту этого элемента и краски фона.

С переполнением: скрытый в родительском div, вы не увидите перекрывающиеся элементы. В конце концов вам понадобятся полосы прокрутки с переполнением: auto; :

#how-it-works { 
    background-color: #eeeeee; 
    overflow: auto; 
    padding-top: 50px; 
}