我怎样才能在每行三列中布置六个<div>？</div>

Question

我正在构建此网站：http://reprezenta.us.lt/

我需要的是在主页上放置6个帖子，两个三个，一个在另一个上面。

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

关于如何实现这一目标的任何想法？请注意，第一列220px不是帖子。

谢谢！

Answer 1

你可以采取两种方式：

1. 将每组3个div包装在另一个div中，并根据需要应用CSS样式。
2. 在第四个div中添加一个类或id，然后使用clear：两者都用于CSS，这样就可以将行放下其他3个div（不确定你是否会在第二组3个div之后正确排列这样做，只是实验）。

Answer 2

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

您需要在每三个帖子之后使用PHP插入一个清除元素，或者使每个帖子div都相同的高度，以便它们排列在一个干净的网格上。

此外，您应该将第一列（220px）设置为自己的容器，以便它不会干扰内容网格或使其足够高以使其占据整个右侧。如果你打算在它下面放置更多的内容，那么我只是给它自己的容器。

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

要查看我的意思的一个例子，关于post divs的高度，在styles.css的第1512行添加一个固定的高度，它将显示需要分开侧栏以及如何干净地浮动post divs。

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

Answer 3

您需要为.column, .columns选择器更改一些CSS。目前它：

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

首先，元素无法显示为内联和 float。如果浮动某些东西，它将适应块级显示。无论如何，在你的情况下，我会尝试inline-block：

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