javascript - 当内容到达div底部时如何将div中的内容打包以向右移动

Question

我用PHP生成了一些内容，但是当内容的个数超过5个后，高度就变得比div的高了，所以我不想让它堆在div上面，而是移动到div 的右侧，从顶部开始。这是一张图片。

PHP

echo '<a class="LibSectOpen">
       <span style="display:none" class="SectionName">'.$Section.'</span>
       <div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
       <div class="LibrarySectsShelf">';
        while($row = mysql_fetch_array($log2)){ 
          echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
          title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
        }
echo ' </div>
       </div>
      </a>';

看起来，示例中的哲学书籍向下，我希望它向右移动并开始另一列五本书等。

我可以用 JQuery 和 CSS 做到这一点吗？

.LibrarySectsHeader {
    border:1px #CCC solid;width:500px; margin:2px; padding:1px; height:18px;border-radius:2px 2px 2px 2px; font-size:10px; color:rgba(0,0,0,1) !important; background-color: rgba(255,255,255,0.6); line-height:18px;
                  }
.LibrarySectsShelf {
    border:1px #CCC solid;width:499px; margin:2px; padding:1px; height:129px;border-radius:2px 2px 2px 2px; font-size:10px; background-color: rgba(255,255,255,0.2); line-height:18px; background-image:url(images/bg/wood.jpg); background-size:100%; background-repeat:no-repeat;
}
.LibrarySectsShelf_Book {
    border:1px #C90 solid;width:148px;height:23px; margin-bottom:1px;border-radius:3px 3px 3px 3px; font-size:10px; background-color: rgba(51,153,255,0.9); padding-left:2px; line-height:22px; color:rgba(255,255,255,1) !important; overflow: hidden;
}
.LibraryBooks {
    border:1px #CCC solid;width:502px; margin:2px; padding:1px;border-radius:2px 2px 2px 2px; font-size:10px; background-color: rgba(102,102,102,1); line-height:18px;
}

Answer 1

您可以仅使用您已经在使用的 PHP、HTML、CSS 解决方案来实现您想要的输出:

PHP

$i=1;
echo '<a class="LibSectOpen">
<span style="display:none" class="SectionName">'.$Section.'</span>
<div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
<div class="LibrarySectsShelf"><div class="move_right">';
while($row = mysql_fetch_array($log2)){ 
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
      title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
if($i%5==0)
{
    echo '</div><div class="move_right">';
}
$i++;
}
echo '</div></div></div></a>';

以上代码使用<div class="move_right"> ... </div>将元素分为 5 个一组，以便在新列中显示每个组。

CSS (.move_right)

.move_right{
    display:inline-block;
    vertical-align:top;
}

Fiddle of how the generated HTML's output will be