Question

我坚持尝试完成以下操作，基本上我有一系列自定义类型的博客帖子将在wordpress中显示在我的自定义模板上，这些博客帖子将是具有可变高度的“盒子”，具体取决于其内容。

我需要解决它的问题，使第二行或下一行将刷新3个下一个div，使它们正好位于每个div上方，而不是垂直对齐div到前一行的最高div。

所以让我说我的第一行div，包含div1，高度= 120px，div2，高度= 100px，然后是div3，高度= 160px。然后我的第二行div应该在每个div之下显示20px，而不管第一行div的高度。

这样做的最佳方法是什么？如果有人可以提供一个例子，无论是CSS还是Jquery。我会很感激的！

Answer 1

我很确定这些不是您正在寻找的答案。如果我理解正确的话，听起来你需要像Pintrest那样布局你的内容。

我最近使用了jQuery Masonry来堆叠网格中的元素并且非常有趣。

我在自己的网站上使用它，它具有响应性/移动友好性，并且效果很好，我会恢复到较小视图的简单全宽度堆栈。要做到这一点，我只需在较小的屏幕上禁用该插件，然后从那里用css进行修改。

Answer 2

您需要的是Fluid Layout。不要使用px，使用ems或％。

Answer 3

您还可以考虑使用自适应布局。一些好的东西要看，并从中发展出来：

Foundation Framework Twitter Bootstrap

或者简单地说，您可以使用@media查询。

此致马特

Answer 4

在你的wordpress主题中你可以使用php。首先构建列并将它们全部放在同一行：

<html>
<body>  
<?
define('NUMBEROFCOLUMNS',3);
define('NUMBEROFTEXTS',15);
$dummytext = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a neque vehicula nunc sollicitudin ultricies. In turpis arcu, tincidunt vel malesuada quis, tincidunt sit amet nisi. Etiam vitae lorem arcu. Proin sit amet nisi mi. Fusce mollis risus quis magna tristique viverra. Etiam varius posuere.';


$columns = array();
/* initialize */
for($i=0; $i<NUMBEROFCOLUMNS; $i++)
{
    $columns[$i]='';
}   
for($i=0; $i<NUMBEROFTEXTS; $i++)
{
    $columns[$i%NUMBEROFCOLUMNS] .= '<div style="margin-top:20px;border: red 1px solid;">'.substr($dummytext,0,rand(100,300)).'</div>';
}

?>
<div class="row">   
<?
$width =round(100/NUMBEROFCOLUMNS);
foreach($columns as $column)
{
    ?>
        <div style="width: <?=$width?>%;float:left;"><?=$column?></div>
    <?
}   
?>
</div>
</body>
</html>

流体布局：高度划分：自动和动态内容

4 个答案: