#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

回答

相关问题