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

Question

我用PHP生成一些内容,但是当内容的数量超过5时,高度变得大于div的高度,所以我不希望它堆叠在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;
}

弄清楚生成的HTML输出将如何

Answer 2

我将在这里提供2个解决方案,PHP和CSS,因为@ariel已经贡献了一个jQuery解决方案,因为我总是喜欢独立于JS,并且它将使用第三方脚本和jQuery库来节省你(如果你没有使用jQuery),我首先选择PHP,而不是那些在IE方面可能不太兼容的CSS.

如果你想用PHP实现它,你需要改变你的循环并设置一个计数器,这将打破..

假设我们有一个array元素,我们想要像你需要的那样设置..

<div class="wrapper">
    <ul>
        <?php
            $arr = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
            $counter = 0;
            foreach ($arr as $value) {
                if($counter%5==0 && $counter != 0){ echo "</ul><ul>";}
        ?>
            <li><?php echo $value; ?></li>
        <?php
                $counter++;
            }
        ?>
    </ul>
</div>

在此,现在用它正在在循环结束时递增计数器变量,线在这里$counter%5==0在if条件规定,如果循环计数器是由5整除,添加</ul><ul>,因此,这将产生一组ul被浮动到left.. li每个由5个组成.

演示 -小提琴代码

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    height: 150px;
    margin: 50px;
    border: 1px solid #eee;
}

ul {
    float: left;
    list-style-type: none;
}

ul li {
    height: 30px;
    width: 150px;
    background: tomato;
    border: 1px solid #515151;
}

现在正如你所说,但是当内容的数量超过5之后,div如果你在标记中应用相同的逻辑,则高度变得大于它的高度,它将强制div启动另一列.

演示 -小提琴代码

<a class="LibSectOpen">
    <span style="display:none" class="SectionName"><?php $value; ?></span>
    <div class="LibrarySects"><div class="LibrarySectsHeader">Whatever</div>
        <div class="LibrarySectsShelf">
            <div class='inner_wrap'>
            <?php
                $arr = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
                $counter = 0;
                foreach ($arr as $value) {
                    if($counter%5==0 && $counter != 0){ echo "</div><div class='inner_wrap'>";}
            ?>
                <div class="LibrarySectsShelf_Book" title="Author:">Whatever <?php echo $value; ?></div>
            <?php
                    $counter++;
                }
            ?>
            </div>
        </div>
    </div>
</a>

使用CSS做同样的事情,你可以使用column-count属性,但就IE而言,它会弄得一团糟......虽然如果你对解决方案感兴趣,那么你去...

演示

HTML

<ul>
   <li>1</li>
   <!-- More incremented li -->
</ul>

CSS

ul {
    list-style-type: none;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

对于多列支持参考