column分栏布局和等高布局和双飞翼布局和圣杯布局

column分栏布局
column-count:分栏的个数
column-width:分栏的宽度
column-gap:分栏的间距
column-rule:分栏的边线
column-span:合并分栏
注意：column-width和column-count不要一起去设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 600px;height: 400px;border: 1px black solid; margin: 30px auto;column-count: 4;column-gap: 20px;column-rule: 1px yellow dashed;}.box h2{column-span: all;text-align: center;}</style>
</head>
<body><div class="box"><h2>李沁 </h2><p>1990年9月27日出生于江苏省苏州市昆山市巴城镇，中国大陆女演员，毕业于上海戏剧学院附属戏曲学校。</p><p>2008年，凭借出演《新版红楼梦》中少年“薛宝钗”被观众熟知。2010年，出演建党90周年献礼片《建党伟业》中的“杨开慧”一角，凭借该片入围第31届大众电影百花奖最佳新人奖。</p><p>在电视剧《守望的天空》中担任女一号，饰演“葡萄”，2013年该剧荣获优秀中国电视剧“金天使奖”。2013年，又陆续出演都市情感电视剧《花开半夏》《璀璨人生》以及现代都市女性励志复仇剧《千金归来》。</p><p>2016年11月11日，在浙江卫视双11狂欢夜晚会上，李沁与侯佩岑、黄子佼、华少、欧弟、沈凌、刘昊然等人一起成为了这场一年一度狂欢盛典的主持团成员。</p></div>
</body>
</html>

等高布局利用margin-bottom和padding-bottom

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}#parent{ border: 10px black solid; overflow: hidden;}#box1{float: left;width: 100px;background: red;margin-bottom: -2000px;padding-bottom: 2000px;}#box2{float: right;width: 100px;background: blue;margin-bottom: -2000px;padding-bottom: 2000px;}</style>
</head>
<body><div id="parent"><div id="box1"><p>1111111111</p><p>1111111111</p><p>1111111111</p><p>1111111111</p><p>1111111111</p></div><div id="box2"><p>22222222</p><p>22222222</p><p>22222222</p><p>22222222</p><p>22222222</p></div></div>
</body>
</html>

双飞翼布局
利用浮动和margin负值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.header{height: 100px;background: red;}.container .center{height: 200px;float: left;width: 100%;}.container .center p{background: yellow;height: 100%;margin: 0 150px 0 100px;}.container .left{float: left;width: 100px;height: 200px;background: blue;margin-left: -100%;}.container .right{float: left;width: 150px;height: 200px;background: green;margin-left: -150px;}</style>
</head>
<body><div class="header"></div><div class="container"><div class="center"><p>内容部分</p></div><div class="left"></div><div class="right"></div></div>
</body>
</html>

圣杯布局利用浮动和margin负值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.clear::after{content: "";display: block;clear: both;}.header{height: 100px;background: red;}.container {background: yellow;margin: 0 150px 0 100px;}.container .center {height: 200px;float: left;width: 100%;}.container .left{float: left;width: 100px;height: 200px;background: blue;margin-left: -100%;position: relative;left: -100px;}.container .right{float: left;width: 150px;height: 200px;background: green;margin-left: -150px;position: relative;right: -150px;}</style>
</head>
<body><div class="header"></div><div class="container clear"><div class="center">内容部分</div><div class="left"></div><div class="right"></div></div>
</body>
</html>

column分栏布局和等高布局和双飞翼布局和圣杯布局相关推荐

column分栏布局只是文字布局吗_写给自己看的CSS columns分栏布局教程
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8436 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...
column分栏布局只是文字布局吗_CSS3 column 分栏
column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的宽 ...
Css布局学习之column的分栏布局
Css布局学习之column的分栏布局一. column分栏布局的常用属性: column-count 设置分栏的个数 column-width 设置分栏的宽度注:一般个数和宽度有冲突,所以col ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
等高布局、圣杯布局、双飞翼布局的实现原理
等高布局: - 假等高: 原理:利用内外边距相抵消,注意父元素设置"overflow:hidden",列变宽,其他列等高变化优点:结构简单,兼容所有浏览器缺点:伪等高,需要合理 ...
常见的预设分栏包括_计算机应用基础_实训项目二Word综合应用
. 专业学习资料 . 实训项目二 Word 综合应用示例实训项目二 Word 综合应用实训满分 20 分 . 以日常应用为基础 , 设计一个综合运用 Word 基本操作技能解决实际问题的文档 . ...
圣杯布局-三种实现方式，css经典布局
圣杯布局:经典三栏布局,左右两边宽度固定,中间自适应圣杯布局在前端构建页面是最常见的一种布局方式,也是前端面试中最常被问到的一问题,下面通过三种方式去实现圣杯布局!附代码!可以一对比一下哪种方式最便 ...
speedoffice（Word）怎么分栏
分栏指将文档中的文本分成两栏或多栏,是文档编辑中的一个基本方法,一般用于排版.那么Word怎么分栏.下面就以最常用的speedoffice为例向大家介绍word分栏设置方法,不会的朋友可以参考本文 1 ...
双飞翼布局内容不换行_web前端入门到实战：圣杯布局和双飞翼布局
稍微了解前端的人都知道,圣杯布局和双飞翼布局是前端面试时必问的问题,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握,毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ ...

column分栏布局和等高布局和双飞翼布局和圣杯布局

column分栏布局和等高布局和双飞翼布局和圣杯布局相关推荐

最新文章

热门文章