#services div有內容，但顯示爲空格div

我的#services div的內容包裹在內部，但是當我想要顯示它的邊框或將其作爲背景時，它顯示爲空格。這裏有什麼竅門？看起來它在代碼片段中工作良好，但是它的出現方式如下：http://laszlovaszi.com/yoursite/。預先感謝！#services div有內容，但顯示爲空格div

#services { 
 
\t border:1px solid red; 
 
\t margin-top:50px; 
 
\t background-color:#f1eee9; 
 
} 
 

 
#services p { 
 
\t margin-top:25px; 
 
} 
 

 
.separator2 { 
 
    width: 100%; 
 
    margin: 20px auto 15px; 
 
    position: relative; 
 
    height: 1px; 
 
\t background-color:#d3d3d3; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div id="services"> 
 
\t \t <div class="col-sm-8 col-sm-offset-2 text-center"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <h1>Our Team</h1> 
 
\t \t \t \t <div class="separator2"></div> 
 
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
\t \t \t \t <div class="col-md-4 service"> 
 
\t \t \t \t \t <div class="img-responsive"> 
 
\t \t \t \t \t \t <img src="photos/service.jpeg" alt="Service"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="service_description"> 
 
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 service"> 
 
\t \t \t \t \t <div class="img-responsive"> 
 
\t \t \t \t \t \t <img src="photos/service.jpeg" alt="Service"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="service_description"> 
 
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4 service"> 
 
\t \t \t \t \t <div class="img-responsive"> 
 
\t \t \t \t \t \t <img src="photos/service.jpeg" alt="Service"> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="service_description"> 
 
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </row> 
 
\t \t </div> 
 
\t </div>

來源

2016-05-13 sklrboy

你有一些html erorrs。請點擊此處：https://validator.w3.org/nu/?doc=http%3A%2F%2Flaszlovaszi.com%2Fyoursite%2F。修復它們，它應該工作正常。 – andreivictor

沒錯。錯誤修正了，但div仍然顯示爲空。但是，我發現溢出：隱藏解決了問題。知道我甚至沒有設置任何固定尺寸，原因是什麼？ – sklrboy

修正你的標記（修訂</row>標籤到</div>）後，我發現你的包裹#services DIV似乎正在崩潰，因爲它浮動孩子。一個clearfix類，將其添加如下：

#services { 
 
\t border:1px solid red; 
 
\t margin-top:50px; 
 
\t background-color:#f1eee9; 
 
} 
 

 
#services p { 
 
\t margin-top:25px; 
 
} 
 

 
.separator2 { 
 
    width: 100%; 
 
    margin: 20px auto 15px; 
 
    position: relative; 
 
    height: 1px; 
 
\t background-color:#d3d3d3; 
 
} 
 

 
.cf:before, 
 
.cf:after { 
 
    content: " "; /* 1 */ 
 
    display: table; /* 2 */ 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
/** 
 
* For IE 6/7 only 
 
* Include this rule to trigger hasLayout and contain floats. 
 
*/ 
 
.cf { 
 
    *zoom: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div id="services" class="cf"> 
 
    <div class="col-sm-8 col-sm-offset-2 text-center"> 
 
    <div class="row"> 
 
     <h1>Our Team</h1> 
 
     <div class="separator2"></div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     <div class="col-md-4 service"> 
 
     <div class="img-responsive"> 
 
      <img src="photos/service.jpeg" alt="Service"> 
 
     </div> 
 
     <div class="service_description"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4 service"> 
 
     <div class="img-responsive"> 
 
      <img src="photos/service.jpeg" alt="Service"> 
 
     </div> 
 
     <div class="service_description"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4 service"> 
 
     <div class="img-responsive"> 
 
      <img src="photos/service.jpeg" alt="Service"> 
 
     </div> 
 
     <div class="service_description"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

你現在看到的#services div有其高度恢復（它只是有一個2px的高度之前，由於邊界）。

Clearfix微黑客：http://nicolasgallagher.com/micro-clearfix-hack/

更多信息：What is a clearfix?

來源

2016-05-13 10:34:37

完美。這可能是一個愚蠢的問題，但爲什麼一個div由於它是浮動的孩子而崩潰？我意識到溢出：hidden或float：left也解決了這個問題，但我無法弄清楚是什麼原因以及爲什麼所有這些都有幫助。謝謝！ – sklrboy

@LászlóVaszi不用擔心。浮動元素基本上從網頁的正常「流」中移除。因此，爲什麼例如你可以在一個元素之前在DOM中擁有一個元素，然後讓它出現在該元素之後（通過右移）。由於這種行爲類型，他們屬於技術上的父母沒有身高。一篇好的文章比我所能解釋的更好：http://www.impressivewebs.com/clearing-floats-why-necessary/ –

您需要使用float屬性來實現這樣

#services { 
border:1px solid red; 
margin-top:50px; 
background-color:#f1eee9; 
float:left; 
width:100%: 
}

你也可以添加寬度屬性，如果你想。

來源

2016-05-13 10:35:45

#services div有內容，但顯示爲空格div

回答

相關問題