CSS流式布局如何实现，思路及代码是什么

发布时间：2023-10-19 09:40:52 所属栏目：语言来源：

导读：这篇文章给大家介绍了“CSS流式布局怎么实现，思路及代码是什么”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

说明

这篇文章给大家介绍了“CSS流式布局怎么实现，思路及代码是什么”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

说明

1、流式布局使用非固定像素来定义网页内容，即百分比布局。

2、通过将盒子的宽度设置为百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

分类

左侧固定,右侧自适应

右侧固定左侧自适应

两侧固定,中间自适应

等分布局

实例

.masonry {
-moz-column-count:3; /* 火狐 */
-webkit-column-count:3; /* Safari 和谷歌 */
column-count:3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
width: 80%;
margin:1em auto;
}
.item {
padding: 1em;
margin-bottom: 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: #b5ffa1;
}

//适应屏幕
@media screen and (max-width: 800px) {
.masonry {
column-count: 2; // two columns on larger phones
}
}
@media screen and (max-width: 500px) {
.masonry {
column-count: 1; // two columns on larger phones
}
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!