css瀑布流间距不对

Posted 2023-03-28

参考技术A css设置盒子的宽就可以调节间距。使用letter-spacing属性设置字间距。使用line-height属性设置行间距，即行高。使用margin或padding属性设置段落间距或元素之间的距离。

怎样在网页中做出瀑布流效果？

　　在网页中实现瀑布流效果方法：

　　1.传统多列浮动

　　各列固定宽度，并且左浮动;

　　一列中的数据块为一组，列中的每个数据块依次排列即可;

　　更多数据加载时，需要分别插入到不同的列上。

　　2. CSS3 定义

　　由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现;

　　#container

　　-webkit-column-count: 5；

　　/*-webkit-column-gap: 10px；

　　-webkit-column-rule: 5px solid #333；

　　-webkit-column-width: 210px；*/

　　-moz-column-count: 5；

　　/*-moz-column-gap: 20px；

　　-moz-column-rule: 5px solid #333；

　　-moz-column-width: 210px；*/

　　column-count: 5；

　　/*column-gap: 10px；

　　column-rule: 5px solid #333；

　　column-width: 210px；*/

　　

　　column-count 为列数; column-gap 为每列间隔距离; column-rule 为间隔边线大小; column-width 为每列宽度; 当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏; 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏; 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。

　　3.绝对定位

　　可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整。

参考技术A

瀑布流效果

http://www.sucaihuo.com/js/591.html

在原有基础上，远程添加图片

<div id='controls-bottom'> 
    <input class='control-input one' placeholder='添加一张图片的URL看看效果！' type='url'> 
    <div class='control-button bottom-one'>Append</div> 
</div>

瀑布流列表结构图

<div class='grid-wrapper'> 
    <div class='grid-item'> 
        <img src='picture/2dartist_issue_111_mar15_unlocked_page_001-680x967.jpg'> 
    </div> 
    <div class='grid-item'> 
        <img src='picture/2dartist_issue_111_mar15_unlocked_page_006-680x478.jpg'> 
    </div> 
</div>

本回答被提问者采纳