5.2布局系列——Column多栏文本与垂直律动

用户5478764823586
267 阅读6分钟

本人已参与新人「创作礼活动」，一起开启掘金创作之路。

一、概述

在不同设备上阅读文章，因手机、平板、PC电脑的设备屏幕宽度不同，导致阅读体验不友好，尤其是文章在宽屏显示器上直接平铺。鉴于此，可把文本分成多栏等宽进行展示，类似报纸上的分栏效果。

  • 特点：仅对文本内容分栏展示，并非网格布局

二、排版属性

  • columns-count —— 栏数
  • columns-width —— 栏宽
  • columns —— columns-width 与 columns-width 的简写形式
  • column-gap —— 栏间距，默认值1em;
  • columns-span —— 跨栏 all | none
  • column-rule：1px solid red—— 指定列与列间的边框样式
  • break-inside: avoid —— 应用在子元素上，在多列布局页面下的内容盒子如何中断
columns: 200px; /* 每栏的最小宽度为200px，自动设置栏数 */ 
columns-width: 200px; /* 同上 */

columns: 3; /* 3栏，自动设置宽度 */
columns-count: 3;  /* 同上 */

columns: 3 200px; /* 最多3栏，每栏宽度至少200px */
columns-count: 3; 
columns-width: 200px;

三、代码示例（不跨栏 VS 跨栏 ）

  • 不跨栏 image.png

  • 跨栏 image.png

<!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>
        * { padding: 0; margin: 0;}
        .box {
            width: 800px;
            padding: 20px;
            border: 2px dashed gold;
            box-sizing: content-box;
            columns: 3 200px;
            column-gap: 1em;
        }
        h3 {
            column-span: all;
        }
    </style>
</head>
<body>
<div class="box">
    <h2>《中共中央 国务院关于加快建设全国统一大市场的意见》发布</h2>
    <span>
        新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。

建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见明确，加快建立全国统一的市场制度规则，打破地方保护和市场分割，打通制约经济循环的关键堵点，促进商品要素资源在更大范围内畅通流动，加快建设高效规范、公平竞争、充分开放的全国统一大市场，全面推动我国市场由大到强转变，为建设高标准市场体系、构建高水平社会主义市场经济体制提供坚强支撑。

根据意见，加快建设全国统一大市场的工作原则是：立足内需，畅通循环；立破并举，完善制度；有效市场，有为政府；系统协同，稳妥推进。主要目标是：持续推动国内市场高效畅通和规模拓展，加快营造稳定公平透明可预期的营商环境，进一步降低市场交易成本，促进科技创新和产业升级，培育参与国际竞争合作新优势。

意见坚持问题导向、立破并举，从六个方面明确了加快建设全国统一大市场的重点任务。从立的角度，意见明确要抓好“五统一”。一是强化市场基础制度规则统一。二是推进市场设施高标准联通。三是打造统一的要素和资源市场。四是推进商品和服务市场高水平统一。五是推进市场监管公平统一。从破的角度，意见明确要进一步规范不当市场竞争和市场干预行为。

意见强调，加强党的领导，完善激励约束机制，优先推进区域协作，形成工作合力。（完）
    </span>
    <h3>上海：近一轮全市核酸筛查采样2512万人 结果异常25996人</h3>
    <p>
        今天（11日）举行的上海市疫情防控新闻发布会通报，这两天上海启动了全市核酸筛查，截至4月11日上午8时，共采样2512万人，已完成检测2152万人，其中结果异常25996人，目前还有一部分混管阳性人员的复检工作正在进行中。
    </p>
</div>
</body>
</html>

四、垂直律动 (对比)

文章内容中存在标题与普通文本，因行高不同导致段落内容不能排进网格基线，即每栏同一行的文字内容不在同一水平线，出现错乱现象

  • 解决方法： 所有标题的上外边距 + 行高 + 下外边距 = n * 正文行高 (倍数n，为正整数)

image.png

image.png

<style>
    * { padding: 0; margin: 0;}
    .box {
        width: 800px;
        padding: 20px;
        border: 2px dashed gold;
        box-sizing: content-box;
        columns: 3 200px;
        column-gap: 1em;
    }
    h2 { line-height: 40px; }
    h3 { line-height: 40px; }
    p { line-height: 20px; }
</style>

五、break-inside

break-inside这个CSS属性描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。请见下面两个对比图

image.png

image.png

代码如下：

<!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>
        * { padding: 0; margin: 0;}
        .box {
            width: 500px;
            padding: 20px;
            border: 2px dashed gold;
            box-sizing: content-box;
            columns: 2 200px;
            column-gap: 1em;
            column-rule: 2px solid green;
        }
        .item {
            border: 1px solid red;
            margin-bottom: 20px;
            break-inside: avoid;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1、新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。 建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见明确，加快建立全国统一的市场制度规则，打破地方保护和市场分割，打通制约经济循环的关键堵点，促进商品要素资源在更大范围内畅通流动，加快建设高效规范、公平竞争、充分开放的全国统一大市场，全面推动我国市场由大到强转变，为建设高标准市场体系、构建高水平社会</div>
    <div class="item">2、新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。 建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见明确，加快建立全国统一的市场制度规则，打破地方保护和市场分割，打通制约经济循环的关键堵点，促进商品要素资源在更大范围内畅通流动，加快建设高效规范、公平竞争、充分开放的全国统一大市场，全面推动我国市场由大到强转变，为建设高标准市场体系、构建高水平社会</div>
    <div class="item">3、新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。 建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见明确，加快建立全国统一的市场制度规则，打破地方保护和市场分割，打通制约经济循环的关键堵点</div>
    <div class="item">4、新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。 建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见明确，加快建立全国统一的市场制度规则，打破地方保护和市场分割，打通制约经济循环的关键堵点，促进商品要素资源在更大范围内畅通流动，加快建设高效规范、公平竞</div>
</div>
</body>
</html>
avatar
文章
阅读
粉丝