Question

我的#services div包含内容，但是当我想显示它的边框或给它一个背景时，它显示为一个空div。这里的诀窍是什么？看起来它在代码段中效果很好，但它出现的方式如下：http://laszlovaszi.com/yoursite/。提前谢谢！

＆＃13;

ClassList

＆＃13;

#services {
	border:1px solid red;
	margin-top:50px;
	background-color:#f1eee9;
}

#services p {
	margin-top:25px;
}

.separator2 {
    width: 100%;
    margin: 20px auto 15px;
    position: relative;
    height: 1px;
	background-color:#d3d3d3;
}

＆＃13;

Answer 1

在更正标记后（将</row>标记修改为</div>），我注意到由于其浮动的子项，您的包裹#services div似乎正在崩溃。添加 clearfix 类，如下所示：

＆＃13;

#services {
	border:1px solid red;
	margin-top:50px;
	background-color:#f1eee9;
}

#services p {
	margin-top:25px;
}

.separator2 {
    width: 100%;
    margin: 20px auto 15px;
    position: relative;
    height: 1px;
	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;
}

＆＃13;

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

＆＃13;

您现在已经注意到，#services div的高度已经恢复（之前由于边界的高度为2px）。

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

更多信息：What is a clearfix?

Answer 2

您需要使用float属性才能实现

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

如果您愿意，也可以添加width属性。

#services div有内容但显示为空div

2 个答案: