修改

Question

我正在尝试使用CSS浮动列，以便它们像在此博客上一样均匀堆叠：http://typeneu.com

使用CSS似乎是不可能的，所以我正在研究JavaScript。

上面列出的网站使用此JavaScript文件：http://typeneu.com/wp-content/themes/grid-a-licious/scripts/grid-a-licious.js

我已尝试将其实施以进行实验，但似乎无法正常工作。

有关此主题的教程的任何链接或有关使用JavaScript或CSS的建议吗？

编辑：我希望屏幕分辨率的列数灵活。

Answer 1

该JavaScript文件实际上是此插件的一部分：

http://suprb.com/apps/gridalicious/

然而，在CSS中并不难。你只需要使用花车。

例如：

<div style="float:left">Hello</div>
<div style="float:left">I'm also saying hello</div>
<div style="clear:both;"></div>
<div style="float:left">Hi again</div>
<div style="float:left">From the second line, that too!</div>
<div style="clear:both;"></div>

是否足够清楚？

Answer 2

我有一个网站，它基本上有DIV的浮动，左边有一个设置的像素宽度。根据分辨率和窗口大小，我可能有1-n列，您应该能够基本上：

<style>
.myClass
{
float:left;
width:350px;
}
</style>

<div class="myClass>my content</div>
<div class="myClass>more  content</div>
<div class="myClass>even more content</div>

要获得固定数量的列，我假设您可以使用javascript计算宽度，或者可能还有其他一些技巧。

修改

好的查看他们的JS文件，你需要确保你匹配你的班级和id以匹配他们期望的东西看起来你的所有帖子都需要在id为allposts的div中。

查看您输入的网站的HTML，并将您的html与他们的网站相匹配。

Answer 3

保持简单。这应该是一个很好的页面...... css应该包含这个：

.header,.bod,.footer { width: 700px; margin: 0 auto; }
.header { border-bottom: 3px solid #CCC; margin-bottom: 1.0em; }
.footer { border-top: 3px solid #CCC; padding-top: 1.0em; }
.first, .second, .third, .fourth { position: absolute; top: 0; left: 0;}

.first    { width: 100px; left:10px;}
.second   { width: 100px; left:110px;}
.third    { width: 100px; left:220px;}
.fourth   { width: 100px; left:330px;}

.clear,.tall { position: relative; } /*\*/* html .clear{ display: inline;}
.tall:after { content: ''; } /*fix of safari bug?*/

和一些html（在你调用css之后在体内）：

<body>
    <div class="header">TITLE</div>
    <div class="bod clear">
        <div class="first tall"> Lorem ipsum </div> 
        <div class="second"> Lorem ipsum </div> 
        <div class="third"> Lorem ipsum </div> 
        <div class="fourth"> Lorem ipsum </div>
    </div>
    <div class="footer" >FOOTER</div>
</body>
</html>

简单，有效，对吧？

Answer 4

在页面上放置第一个组件后，确定其尺寸，然后使用绝对放置在UI上一个接一个地放置下一个组件。

在JavaScript中双向浮动列

4 个答案:

修改