CSS：不要接受全格

我已經創建了一個包含div孩子的div。孩子的div都應該有相同的background-color爲主要的div（<div id="how-it-works">），但它似乎沒有工作，我不知道爲什麼。CSS：不要接受全格

有什麼建議嗎？

#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>

來源

2014-10-31 user3804594

這三個'feature- *'是浮動的。

您可以設置-IT-工作overflow:hidden。

來源

2014-10-31 09:26:41

嘗試添加clearfix到#how-it-works容器

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

三個特徵<div> s的浮動。這需要他們正常的文檔流，這使得它們不影響#how-it-works容器的高度之外。甲clearfix，或在此情況下的Jonas Grumann提到加入overflow: hidden解決這個問題。然而，如果你需要例如clearfix，那麼clearfix是更好的選擇。一個box-shadow的元件上。

如果你在檢查例如Chrome的DevTools你可以很容易地看到這一點#how-it-works容器，該功能<div> s爲不在藍色覆蓋，顯示#how-it-works容器的尺寸。

來源

2014-10-31 09:25:36 ckuijjer

overflow：hidden;到＃它的工作原理同樣可行，代碼少 – 2014-10-31 09:26:16

您也可以創建一個類.clear{ clear:both; }並使用#feature-*元素下的那個。

見小提琴：fiddle

來源

2014-10-31 09:29:59 Refilon

替換下面的代碼：

#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％，它解決了問題。

來源

2014-10-31 09:34:25 Punita

從最後一個div元素中取出float屬性（＃功能三）：

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

這將使父DIV認識到這一元素的至少高度，繪製背景。

溢出：隱藏在你的父div上，你將看不到重疊的元素。最終你需要使用溢出滾動條：auto; ：

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

來源

2014-10-31 09:53:23 ironmouse

CSS：不要接受全格

回答

相關問題