代码之家 › 专栏 › 技术社区 › warren

用于多列查看的div动态调整大小/重新定位

dynamic-css styling css html php

1

warren · 技术社区 · 17 年前

安装程序

我有一个网站,绘制RSS提要并在页面上显示它们。目前,我在包含每个提要的div上使用百分比,以便倍数可以彼此相邻。

但是,我只有两个相邻的窗口,如果窗口调整大小,屏幕上可能会出现一些难看的空白。

愿望

我想做的是,将所有提要线性地放到页面中,并且:

“预构建”多列视图,其中提要将自己“平衡”到列中

这让我想到:

列数根据屏幕当前的宽度而变化\

这类似于文字处理应用程序处理列式布局的方式。

问题

我假设我需要实现某种形式的AJAXy快乐,但目前对Javascript知之甚少。

有什么方法可以做到这一点吗 CSS/HTML/PHP?

如果没有,我应该如何着手解决这个问题?

最终解决方案:

(基于 @warpr 和 @joh6nn (议员的答覆)

#rss
        {min-width: 10em;
        max-width: 25em;
        min-height: 15em;
        max-height: 25em;
        font-size: .97em;
        float: left;
        }

4 回复 | 直到 9 年前

1

3

warp 17 年前

我在相册中使用的一个技巧是:

确保每个进纸的高度相同。

因为每个div都有相同的尺寸,当它们向左浮动时,它们将形成一个网格,其中列的数量正好适合您的浏览器。

除非您实际固定div的高度并使用CSS剪裁内容,否则步骤2将需要javascript,我所做的是:

再次迭代每个div,更改高度以匹配第一步中找到的div。

这相当容易实现,但显然不是最优的。我期待着阅读这里发布的任何更好的解决方案:)

2

1

joh6nn 17 年前

您可以使用列表来完成此操作;我从来没有试过,所以我不确定。

如果使列表项显示为:inline,则列表将变为水平而不是垂直。从这里开始,如果你将列表填充到一个包含元素中,并对填充和边距进行修改,你可能会使列表像文本一样进行线扭曲:再说一遍,我从来没有尝试过,所以我不知道。

如果这项技术奏效的话,我很想听听。

3

0

Raithlin 17 年前

我能想到的唯一方法是混合使用动态CSS和javascript。每次添加列(提要)时,使用javascript重写每个div的宽度(百分比)。

jQuery将在这里派上用场。

var columns = $(".feed").size();
var size = 100/columns;
$(".feed").css("width",size+"%");

如果我错了,有人随时纠正我。我的jQuery有点不稳定。

当然,如果不使用AJAX,可以完全用PHP实现相同的解决方案。

4

0

marc_s MisterSmith 11 年前

您还可以使用这个jQuery javascript(您将需要jQuery库)。

var docwidth = $(document).width();
var numOfCollums = $('.feed').length;
var colWidth = docwidth/numOfCollums;
$('.feed').each( function() {
     $(this).width(colWidth);
});

要使其正常工作,您的列应该具有类“feed”

编辑:

你应该这样设计你的div:

.feed{
  float:left;
}