Css 如何布置六个<；部门>；s在两行中，每行三列？

我正在建设这个网站：

我需要的是在主页上放置6个帖子，分为两行，三行，一行在另一行之上

我设法定位了前3个职位。现在我需要在前3个帖子下面的另一行中堆叠其他3个帖子

关于如何实现这一点有什么想法吗？请注意，220px的第一列不是post

---

谢谢

有两种方法可以做到这一点：

将每组3个div包装在另一个div中，并根据需要应用CSS样式

在第四个div中添加一个类或id，然后在CSS中使用clear:both，这样它就可以将行放在其他3个div下面（不确定在完成此操作后是否会使第二组3个div正确对齐，只需进行实验）

---

你做得对，关于柱子的浮动，这里的问题是它们都是不同大小的，所以它们不是浮动在一个干净的网格中，而是填充第二个和第三个柱子div创建的空间，因为第一个太高了

您需要使用PHP在每三个post之后插入一个clearing元素，或者使每个post div具有相同的高度，以便它们排列在一个干净的网格上

此外，您应该使第一列（220px）成为自己的容器，这样它就不会干扰内容网格，或者使它足够高，这样它就占据了整个右侧。如果你想在它下面放置更多的内容，那么我会给它自己的容器

因此，您将有两个父容器，侧栏和内容。侧栏包含最左边的所有元素，然后内容包含重复的帖子网格

为了了解我的意思，关于post div的高度，在styles.css的第1512行添加一个固定高度，它将显示分离侧栏的需要以及如何干净地浮动post div

.news-widget-item {
    margin-bottom: 40px;
    height: 420px;
}

---

您需要更改

.column、.columns

选择器的一些CSS。目前：

float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;

首先，元素不能内联和浮动显示。如果浮动某个对象，它将调整块级显示。无论如何，在您的情况下，我会尝试

内联块

：

display: inline-block;
margin-left: 10px;
margin-right: 10px;
vertical-align: top;

这将使元素很好地堆叠起来。它应该适用于所有现代浏览器和IE8+，但对于传统浏览器，您可能需要一些CSS技巧

这将包括

newspost

元素，如果您想在外部显示它，可以执行以下操作：

.newspost.columns {
    position: absolute;
    margin-left: -230px;
}

然后调整容器：

.container {
    padding-left: 230px;
    width: 730px;
}