当内容到达div的底部时如何将内容打包到div中以向右移动
用户名
我用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;
}
Zword
您可以仅使用已经使用的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的输出将如何
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
当内容到达div的底部时如何将内容打包到div中以向右移动
- 2
如何将直方图向右移动？
- 3
内容动态时，如何将<p>对齐到<div>或<td>中？
- 4
如何在单击时将div内容置于底部
- 5
如何将系统设置图标向右移动。或至少将其复制到右侧
- 6
将 span 元素向右移动到 div 标签
- 7
Firefox 向右浮动时将内容推出 div
- 8
如何将内容绑定到个人div
- 9
如何将文本稍微向上和向右移动？
- 10
HTML如何将按钮向右移动
- 11
如何将<li>项目符号元素向右移动？
- 12
如何将文本稍微向上和向右移动？
- 13
如何将垂直滚动条向右移动？
- 14
如何将Rust向量中的元素向右移动并将越界元素放在开始位置？
- 15
如何将div内容左右滑动..？
- 16
如何将文本内容放入div
- 17
如何将div固定到较大div的底部？
- 18
每次重新呈现div内容时，如何将Meteor回调与Jquery一起使用以自动滚动到div的底部？
- 19
将内容注入到注入的div中
- 20
如何将div覆盖在其他div的内容上而不位于该div中
- 21
是否可以在列表中向左或向右移动边框底部？
- 22
如何将fa-fa图标向右移动并在之间移动
- 23
如何将html页面中的div内容加载到主页上的div中？
- 24
如何将列内容放在底部？
- 25
在 div 上向左或向右移动鼠标时迭代数组
- 26
如何使用JavaScript将div的内容克隆到另一个div中？
- 27
每次到达页面底部时加载内容
- 28
每次到达页面底部时加载内容
- 29
如何将图像对齐到嵌套div的底部（在引导程序中）？
我来说两句