0

我一直在尝试完成以下工作，基本上我有一系列自定义类型的博客文章，它们将显示在我在 wordpress 中的自定义模板上，这些博客文章将是“盒子”，高度取决于它们的内容。

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

所以假设我的第一行 div，包含高度 = 120px 的 div1，高度 = 100px 的 div2，然后是高度 = 160px 的 div3。然后，无论第一行 div 的高度如何，我的第二行 div 应该在每个这些 div 下方显示 20px。

这样做的最佳方法是什么？如果有人可以为我提供一个示例，CSS 或 Jquery。将不胜感激！

4

4 回答 4

1

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

我最近使用了jQuery Masonry，它将元素堆叠在一个网格中并且非常通用。

我在自己的网站上使用了它，该网站具有响应性/移动友好性，效果很好，我恢复为简单的全宽堆栈以获得较小的视图。为此，我只需在较小的屏幕上禁用插件并从那里使用 css 进行修改。

于 2013-05-11T03:30:48.477 回答
0

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

于 2013-05-11T02:15:07.243 回答
0

您还可以考虑使用响应式布局。一些值得关注和发展的好东西可能是：

基础框架 Twitter 引导程序

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

问候， 马特

于 2013-05-11T02:22:57.417 回答
0

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

<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>
于 2013-05-12T09:53:58.207 回答