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

来源：恒创科技编辑：恒创科技编辑部

2024-01-15 10:00:59

这篇文章给大家介绍了“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:1emauto;
}
.item{
padding:1em;
margin-bottom:1em;
-moz-page-break-inside:avoid;
-webkit-column-break-inside:avoid;
break-inside:avoid;
background:#b5ffa1;
}

//适应屏幕
@mediascreenand(max-width:800px){
.masonry{
column-count:2;//twocolumnsonlargerphones
}
}
@mediascreenand(max-width:500px){
.masonry{
column-count:1;//twocolumnsonlargerphones
}
}

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

以上就是关于“CSS流式布局怎么实现，思路及代码是什么”的介绍了，感谢各位的阅读，如果大家想要了解更多相关的内容，欢迎关注恒创科技，小编每天都会为大家更新不同的知识。

本文地址：https://www.henghost.com/jishu/17158/