Question

我正在尝试为电子商务网站创建高效，干净的布局。这个网站是为我的客户内部构建的，我只负责CSS和基本结构。

我想弄清楚连续清除每个第三个方框的最佳STRUCTURAL方法。当盒子大小相同时，它们会自然地浮在网格中，但当其中一个根据内容改变大小时（这在网站上很常见），盒子会不正确地移动并打破布局。

我考虑过/尝试过两种选择：

我可以手动放置一个div容器，每隔三个盒子后面就会显示“clear”样式。
我可以将这些方框包装成3个组，然后使用element：after在此容器中放置一个clear，这样可以有效地清除行中的3个方框。

这些选项中的一个比另一个好吗？我知道“清晰”的div不是更好，但是创建一个新的容器来包装3个盒子更好吗？无论哪种方式，我仍然在页面中添加一个新的HTML元素。

我还缺少另一种选择吗？我知道可以动态地执行这些选项中的任何一个，但我想确保为此项目选择更有效的选项。也就是说，我不必担心代码将如何编写功能，我只需要弄清楚最终结构的外观。

我对这种布局没有经验，我不知道是否有可能还有我尚未发现的东西，至于如何做到这一点。

Answer 1

如果我理解正确，您希望每个第三项都有clear: both;

让我们假设这些项目是div。所有这些都在<div id="container"></div>内。

现在，我会做以下事情：

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

Answer 2

您可以使用：nth-child（）CSS伪类来实现此目的。

此处有更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

示例：

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

Answer 3

根据您需要提供的支持，您可以使用CSS3 nth-child选择器。

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

或类似的东西取决于其他一切设置的方式。

Answer 4

您可以使用伪元素:nth-child()

来完成此操作

#element:nth-child(3n) {  
    clear:both;
}

n从0开始，每个元素类型

上升一个

以下是:nth-child()的总体展示 http://www.w3schools.com/cssref/sel_nth-child.asp

Answer 5

假设您的顶级包装器有一个固定的宽度，您希望在其中容纳每个3个盒子的行，最好的解决方案是将行容器div放置为clear：两个css样式，如下面的代码所示

    <html>
<body>
<style>
   #box_wrapper{
      max-width:200px;
      border: 2px blue  solid;
   }
   .row_container{
      clear:both;
      border: 1px yellow solid;
   }   
   .box{
       width:50px;
       height:50px;
       float:left;
       border: 1px red dotted;
   }
</style>
<div id="box_wrapper" width="200" height="200">
  <div class="row_container">
          <div class="box" id="box_1"></div>
          <div class="box" id="box_2"></div>
          <div class="box" id="box_3"></div>          
  </div>
  <div class="row_container">
          <div class="box" id="box_4"></div>
          <div class="box" id="box_5"></div>
          <div class="box" id="box_6"></div>          
  </div>
  <div class="row_container">
          <div class="box" id="box_7"></div>
          <div class="box" id="box_8"></div>
          <div class="box" id="box_9"></div>          
  </div>
</div>  
</body>
</html>

如何连续清除每个第三个框？

5 个答案: