1

我正在建立这个网站：http ://reprezenta.us.lt/

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

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

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

谢谢！

4

3 回答 3

1

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

  1. 将每组 3 个 div 包装在另一个 div 中，并根据需要应用 CSS 样式。
  2. 将一个类或 id 添加到第四个 div，然后对 CSS 使用 clear:both ，这样它就会将该行放在其他 3 个 div 下方（不确定这样做后您是否会让第二组 3 个 div 正确排列，只是实验）。
于 2012-08-24T07:49:17.000 回答
1

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

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

此外，您应该将第一列 (220px) 作为自己的容器，这样它就不会干扰内容网格，或者让它足够高，以便占据整个右侧。如果您要在其下放置更多内容，那么我只会给它自己的容器。

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

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

.news-widget-item {
    margin-bottom: 40px;
    height: 420px;
}
于 2012-08-24T07:51:42.950 回答
1

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

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

首先，一个元素不能内联和浮动显示。如果您浮动某些东西，它将适应块级显示。无论如何，在你的情况下，我会尝试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;
}

在此处输入图像描述

于 2012-08-24T08:06:37.200 回答