我使用
PHP生成一些内容,但是当内容数量超过5以后,高度会比div的高,所以我不希望它堆叠在div的顶部,而是移动到右边的div并从顶部开始.这是一个图像.
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,1) !important; background-color: rgba(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,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,0.9); padding-left:2px; line-height:22px; color:rgba(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,1); line-height:18px; }
解决方法
您只需要使用您现在使用的PHP,HTML,CSS解决方案即可实现输出:
$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; }
原文地址:https://www.jb51.cc/js/154053.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。