前端学习（535）：多列布局2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css多列布局</title><style>.parent{column-count: 4;column-width: 300px;}.col1,.col2,.col3,.col4{height: 300px;}.col1{background-color: thistle;}.col2{background-color: tomato;}.col3{background-color: turquoise;}.col4{background-color: red}</style>
</head>
<body>
<div class="parent"><div class="col1"></div><div class="col2"></div><div class="col3"></div><div class="col4"></div>
</div>
</body>
</html>

运行结果

前端学习（535）：多列布局2相关推荐

前端学习之版心和布局流程
什么是版心? "版心"(可视区)是指网页中主体内容所在的区域.一般在浏览器窗口水平居中显示,常见的宽度值为960px.980px.1000px.1200px等. 布局流程为了提高 ...
前端学习笔记一.Flex布局与VUE2中vuex的使用
经过大佬的提醒开始记笔记,顺便发个博客吧. 一.Flex布局. 参考博客:flex布局知识点(阮一峰博客) - 走看看目前关于flex布局还有一些问题,留个插槽,后面编辑. 同时记一下html中 & ...
前端学习（537）：多列布局4横跨多列
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（536）：多列布局3列得间距
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（512）：两列布局的第一种方式的优缺点
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习（511）：两列布局的第一种方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
flowlayout布局怎么换行_web前端学习怎么入门
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
前端歌谣的刷题之路-第一百四十五题-双列布局-flex
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的 ...
day32—CSS多列布局学习
转行学开发,代码100天--2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08-css布局解决方案之多列布局关 ...

前端学习（535）：多列布局2

前端学习（535）：多列布局2相关推荐

最新文章

热门文章