Html 在3X3X3布局中对齐9个分区，每个分区下有链接盒

编辑#2：我将尝试实现以下内容：

进入我巨大的代码墙，看看是否可以复制结果

结束编辑#2

编辑：好的，这里有一个小提琴演示的场景，我没有添加很多属性，所以它很容易理解。为了达到我想要的效果，我需要在小提琴上添加哪些元素

结束编辑

我这里有一个树桩：

我今天要完成的是，9个div，每个div下面都有一个a href块，所有这些都在一个3x3x3 div中对齐。下面是一个示例：

1 2 3
a a a

4 5 6
a a a

7 8 9
a a a

我遇到的问题是，链接框被推到每个div的右侧，而不是下方。如果我使用：

clear:both;

它打破了格式，但链接框将在每个分区下面正确对齐

我现在正在试验：

display: table; 

但我仍然不能让每件事都按照我想要的方式排列。下面是我的页面现在的屏幕截图（不是所有的div都出现在屏幕截图上，但这应该能让你了解正在发生的事情的要点）：

以下是一些相关代码：

HTML

还有更多的代码，但我认为这应该能让人明白这一点。有人知道这里发生了什么吗？如何使用跨浏览器兼容的方法正确对齐这些内容？谢谢你的帮助

---

为了澄清这一点，我正在尝试获取每个图片方块下方的“更多信息”框。

以下是我对您的第一次编辑的更新，以达到您所要求的效果：

要分解它：

1） 我给每个“littleBoxOfFun”div一个普通的“lbf”类

<div class="littleBoxOfFun1">

3） 因为每第三个lbf div不需要右边的任何边距，所以我使用第n个子选择器以每第三个lbf div为目标并删除边距

.lbf:nth-child(3n+0){
    margin-right:0;
}

---

希望这有帮助。

所以。。。我终于发现了问题。。。。这是我花了一整天才找到的最简单的东西。我把所有的东西都拆开，从头开始写，然后砰的一声，我明白了我的错误是什么。在CSS中，我将所有的row1a、row1b、row1c等称为row1a、row1b、row1c。每个框都是一个链接，但我没有意识到我在CSS中将a标记放在了它们旁边

同时，我也清理了所有代码，因为我意识到它是多么的冗余

总而言之，第1a行、第1b行、第1c行等现在如下所示：

rowBox {
    width:290px;
    display:inline-block;
    float:left;
}

---

我没有在CSS中包含“fadein”div，但它看起来是这样的（这是一个JS图像转换）：fadein{position:relative；width:290px；height:190px；left:0；top:0；overflow:hidden；}一个小的演示足以演示这个问题，它比mega codedump更有用。当然，让我来创建一个演示！很棒的建议贾斯汀，我可能会在未来的项目中尝试！谢谢你的帮助和时间。

<div class="littleBoxOfFun1 lbf"> 

.lbf{
    float:left;
    margin-right:10px;
}

.lbf:nth-child(3n+0){
    margin-right:0;
}

rowBox {
    width:290px;
    display:inline-block;
    float:left;
}