如何在第三个div之后放置clearfix？

Question

我有大小为33.33％的盒子，这就是为什么3个盒子100％totaly。当我添加第四个div时，我的第四个div在滑动时滑动.clearfix我的问题结束了..但我想把clearfix每个第3个div 谢谢。 好的.. @AndreiGheorghiu我的代码;

＆＃13;

＆＃13;

.ref-box {
  position: relative;
  width: 30%;
  float: left;
  margin: 10px 3.3% 10px 0;
}
.ref-item {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 7px;
  color: #FFFFFF;
  background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
  display: block;
  max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="ref-box">
  <figure>
    <a href="works/Facebook/index.html" title="created html-css" target="_blank">
      <img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
    </a>
  </figure>
  <div class="ref-item">
    <span class="ref-head">Facebook Clone</span>
  </div>
</div>
<!-- every ref item-->

＆＃13;

＆＃13;

＆＃13;

多次复制此代码并查看结果

Answer 1

val db = Database.forConfig("", config.getConfig("myDB"))
val qTemplate = StaticQuery[(Int), MyRow] + "select * from table_name where num=?"
db.withSession{ implicit session =>
   (0 until 100).foreach{ case i => 
       qTemplate(2).foreach(println)
   } 
}

更新，问题完成后：

您的clearfix工作正常。这里：

＆＃13;

＆＃13;

.parent>.child:nth-child(3n) {
    clear: both;
}

＆＃13;

.ref-box {
  position: relative;
  width: 30%;
  float: left;
  margin: 10px 3.3% 10px 0;
}
.ref-item {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 7px;
  color: #FFFFFF;
  background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
  display: block;
  max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

＆＃13;

＆＃13;

在看到实况页面后第二次更新。你的问题是你是不均匀高度的漂浮元素。

在看到实例后再次更新。请注意，我没有在您的<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="ref-box"> <figure> <a href="works/Facebook/index.html" title="created html-css" target="_blank"> <img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive"> </a> </figure> <div class="ref-item"> <span class="ref-head">Facebook Clone</span> </div> </div> <div class="ref-box"> <figure> <a href="works/Facebook/index.html" title="created html-css" target="_blank"> <img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive"> </a> </figure> <div class="ref-item"> <span class="ref-head">Facebook Clone</span> </div> </div> <div class="ref-box"> <figure> <a href="works/Facebook/index.html" title="created html-css" target="_blank"> <img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive"> </a> </figure> <div class="ref-item"> <span class="ref-head">Facebook Clone</span> </div> </div> <div class="ref-box"> <figure> <a href="works/Facebook/index.html" title="created html-css" target="_blank"> <img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive"> </a> </figure> <div class="ref-item"> <span class="ref-head">Facebook Clone</span> </div> </div> <div class="ref-box"> <figure> <a href="works/Facebook/index.html" title="created html-css" target="_blank"> <img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive"> </a> </figure> <div class="ref-item"> <span class="ref-head">Facebook Clone</span> </div> </div> <div class="ref-box"> <figure> <a href="works/Facebook/index.html" title="created html-css" target="_blank"> <img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive"> </a> </figure> <div class="ref-item"> <span class="ref-head">Facebook Clone</span> </div> </div> <div class="ref-box"> <figure> <a href="works/Facebook/index.html" title="created html-css" target="_blank"> <img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive"> </a> </figure> <div class="ref-item"> <span class="ref-head">Facebook Clone</span> </div> </div> <!-- every ref item-->容器中添加自定义类（.makeColumns）。我还将此添加到CSS：

col-md-12

你可以看到它在这里工作：

＆＃13;

＆＃13;

.makeColumns {
    -webkit-columns: 300px 3;
    -moz-columns: 300px 3;
    columns: 300px 3;
}
h2 {
   -webkit-column-span: all;
   column-span: all;
}

＆＃13;

.makeColumns {
-webkit-columns: 300px 3;
   -moz-columns: 300px 3;
        columns: 300px 3;
}
h2 {
 -webkit-column-span: all;
         column-span: all;
}


.ref-box {
  position: relative;
  margin: 10px 3.3% 10px 0;
}
.ref-item {
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 7px;
  color: #FFFFFF;
  background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
  display: block;
  max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以像下面给出的那样写css

div:nth-child(3n+3) {
    clear: both;
}

Answer 3

或者，您可以使用overflow: hidden;