css相关问题
瀑布流式布局的做法有很多种，看你的网站可以看出，你应该对WEB前端开发研究得不是很深，那我给你介绍一种最简单的实现方式，只需要通过HTML+CSS就可以实现了。
以三列为例，界面中放三个DIV，每个DIV宽度固定，高度自适应，使用浮动，也就是float:left，然后页面就会变成三列，然后让每列里面内容自适应往下撑就可以了。
一般瀑布流布局跟随着的效果就是延时加载，也就是页面拉到底部时，会自动加载出一批新的内容，这样效果最佳，如果你对JS也有些研究的话，就可以在调用内容时，判断下三个DIV的高度，哪个DIV高度最小，就往哪个DIV里添加内容，就OK了
HTML里面有几种布局方式
1.自然布局。
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对——以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。
由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。
还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。
当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
css多列布局 multi-column（瀑布流布局）
column-count :指定元素应该分为的列数
column-fill：指定css如何填充列
column-gap：指定列之间的差距
column-rule：对于设置所有column-rule-*属性的简写属性
column-rule-color：指定列之间的颜色规则
column-rule-style：指定列之间的样式规则
column-rule-width：指定列之间的宽度规则
column-span：指定元素应该跨越多少列
column-width：指定列的宽度
columns缩写属性设置列宽和列数
break-inside: avoid //防止断裂
css3设计模式，常用布局
1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。
2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局
3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,
css设计模式
OOCSS——Object Oriented CSS
SMACSS——Scalable and Modular Architecture for CSS
垂直水平均分：
子元素纵向等距排列：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 《!DOCTYPE html》即可。
css 瀑布流布局为什么div裂开了
这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置到这两个div里面，这样就出现一个类似于瀑布流的效果了，当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的，一列都是很矮的图片看着会很不协调。大体就是这个样子
CSS瀑布流是什么意思
你百度：花瓣网，就是典型的瀑布流布局。
一种网页展示效果，每行有多个区块或图片，这些区块或图片不在一个水平线上对齐，然后重复重复再重复。
这个叫：瀑布流布局，不应该叫css瀑布流，因为纯css实现的浏览器支持不好，基本上都是有JS的。
css 瀑布流布局问题 高手进
这种瀑布流实现大体有两种方式，一种就是js的方式，一种是css，相对于js来说css的控制不是很好，不能自动加载之类的，只能显示一个瀑布流效果，大体的思路就是一个div里面放两个div分别浮动，高度自动，然后将图片分别放置到这两个div里面，这样就出现一个类似于瀑布流的效果了，当然了这个伪瀑布流的弊端就是如果一列的图片都是很高的，一列都是很矮的图片看着会很不协调。大体就是这个样子
用CSS3做的瀑布流的间隙太大了，怎么改小
您好，很高兴为您解答
css3布局间隙问题其实就是盒子模型
一个盒子有内外间距，有盒子厚度，盒子的宽高尺寸，外间距margin，内间距padding，一般间隙都是通过这两个属性来定，比如左边的间距太宽了，以前是10px，那么我们可以这样写，margin-left：5px;这样外左间距就是5像素
css瀑布流布局的几种实现方式
列数固定，嵌套较多
· 滚动加载更多数据时，需要指定插入到第几列中，不方便。
2、CSS3样式定义法
我们将要用到的是CSS3新加的column属性，通过指定容器的列个数column-count，列间距column-gap，列中间的边框(间隔边线)column-rule，列宽度column-width实现。
优点：
· 直接用CSS定义，方便快捷，是最好不过了；
· 扩展方便。