文档章节

多列布局--瀑布流原理

o
 osc_4nmshwhm
发布于 2018/08/06 23:27
字数 411
阅读 0
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

多列布局

      CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样

  1. 常用属性:

a)      column-count: 属性设置列的具体个数

b)     column-width: 属性控制列的宽度

c)      column-gap: 两列之间的缝隙间隔

d)     column-rule: 规定列之间的宽度、样式和颜色

e)      column-span: 规定元素应横跨多少列(n:指定跨n列  all:跨所有列)

  1. 多列的用法:
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .wrapper{
        width:1054px;
        padding:20px;
        margin:0 auto;
        font-family: "微软雅黑",Arial;
        /*设置以几列的方式显示*/
        column-count:2;
        /*指定列宽*/
        column-width:500px;
        /*指定列与列之间的间距*/
        column-gap: 50px;
        /*指定列与列之间间隙的样式*/
        /*column-rule:2px dotted red*/
        /*相对应下面的三个属性*/
        column-rule-color:red;
        column-rule-style:dotted;
        column-rule-width:2px;
    }
    .wrapper > h4{
        column-span: all;
    }
</style>

 

  1. 列高度的平衡:

如果设定列的最大高度,这个时候,文本内容会从第一列开始填充,然后第二列,第三列

max-height: 300px;

 

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

没有指定分支的“git push”的默认行为 - Default behavior of “git push” without a branch specified

问题: I use the following command to push to my remote branch: 我使用以下命令推送到我的远程分支: git push origin sandbox If I say 如果我说 git push origin does that push ch......

技术盛宴
57分钟前
21
0
为什么在允许某些Unicode字符的注释中执行Java代码?

问题: The following code produces the output "Hello World!" 以下代码生成输出“Hello World!” (no really, try it). (不,真的,试试吧)。 public static void main(String... args......

富含淀粉
今天
18
0
字符串格式:%与.format - String formatting: % vs. .format

问题: Python 2.6 introduced the str.format() method with a slightly different syntax from the existing % operator. Python 2.6引入了str.format()方法,其语法与现有的%运算符略有不......

javail
今天
22
0
什么是按位移位(位移)运算符以及它们如何工作? - What are bitwise shift (bit-shift) operators and how do they work?

问题: I've been attempting to learn C in my spare time, and other languages (C#, Java, etc.) have the same concept (and often the same operators) ... 我一直在尝试在业余时间学习......

法国红酒甜
今天
32
0
OSChina 周二乱弹 —— 卧槽 李荣浩的契约兽啊

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《红色的回忆》- 痛仰乐队 手机党少年们想听歌,请使劲儿戳(这里) 动弹, 又好多...

小小编辑
今天
81
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部