显示之间的垂直间距:流体网格中的内联div

时间:2009-08-01 18:13:11

标签: css inline vertical-alignment fluid

好的,不太确定从哪里开始...

我把自己整理成一个博主,彻底扼杀了它的CSS并将其用作一个简单的内容管理器。这是我一直在使用的测试网站 http://jamesparishtestblog.blogspot.com/

忽略标题,它破碎了,但我知道我在那里做什么。我的问题是电影评论(从苹果预告片作为临时内容被盗)。当您调整页面大小时,它们会流畅地流入不同长度的行。大!麻烦的是,第二行(因而是第三行,第四行等)将自己垂直对齐到上一行中最长(最低)div的底部。但是,我希望每个div整齐地放在上面的一个下方,相隔15px,如果另一个div扩展(通过点击阅读更多......),它会整齐地流动。

排除了将div放在一列中,因为我希望顶行并排包含最新的帖子(左侧的列将在另一列之下)。

div的设置高度也被排除在外,因为文章需要扩展,而对于完全想要的设计,故意不匹配。

这让我困扰了好几个小时。我希望我已经清楚地解释了自己,并且有人可以提供帮助。

感谢您的时间。

1 个答案:

答案 0 :(得分:1)

你想要这个吗?

--------------------------
|   __________  _______  |
|   |        |  |     |  |
|   |        |  |     |  |
|   |        |  |     |  |
|   ----------  |     |  |
|   __________  |     |  |
|   |        |  |_____|  |
|   |        |  _______  |
|   |        |  |     |  |
|   ----------  |     |  |
|               -------  |
|________________________|

如果不使用列,则无法单独使用CSS。你需要使用一些javascript或服务器端的东西把东西放在正确的位置。基本上你想要一个拼贴画,太糟糕了没有“显示:拼贴画”!

当然,我可能会完全误解你。

编辑:

“关于javascript前端的任何建议?”

我几乎在所有网站都使用mootools。我先在那里定义一下:

dispose:从dom中取出一个元素并将其存储在变量中。

inject:将一个元素放入dom。

我将这些加载到列中,然后将所有这些列入“最近”列并将它们重新注入其余列的顶部,每列一个。换句话说,所有的布局都是用CSS完成的,唯一的javascript正在将你的“最近”的东西作为顶级“行”。