css columns

╰半橙微兮° 2023-02-14 02:45 8阅读 0赞

在不适用flex布局情况下，实现元素两端对齐：

### 使用 ###

### 1、columns: width count;  **多栏布局** ###

width： 列宽度  
count： 几列

### 2、**column-gap：20px** ###

列之间的宽度。

### 3、column-rule:  2px solid color;  ###

列与列之间的边框宽度、边框样式、边框颜色；（类似border）

**tips:  三个属性是作用在父级上的，对里边的子级元素 或者文本 进行多栏布局。**

**例一：**

实现3列元素，两端对齐，中间间隔20px

<style>
        .wrapper{
            width: 300px;
            border: 1px solid #000000;
            columns: 3; /*几列*/
            column-gap: 30px; /*列之间的宽度*/
        }
        .wrapper > div{
            background: coral;
            padding: 50px 0;
        }
    </style>
    <div class="wrapper">
        <div class="lv"></div>
        <div class="xing"></div>
        <div class="chen"></div>
    </div>

**效果： **

![20200531184836755.png][]

**例二：**

**实现类似报纸布局**

<style>
        .wrapper{
            width: 800px;
            border: 1px solid #000000;
        }
        .wrapper > div{
            columns: 3;
            -webkit-column-gap: 30px;
            -moz-column-gap: 30px;
            column-gap: 30px;
    
    
        }
    </style>
    <div class="wrapper">
        <div class="box">
            This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented ···
        </div>
    </div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

**缺点：**

只适用于单行。

## ##

[20200531184836755.png]: https://img-blog.csdnimg.cn/20200531184836755.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200531192005807.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3中的多列布局columns详解

columns语法：columns：\[ column-width \] || \[ column-count \] 设置或检索对象的列数和每列的宽度其中：\[ col

雨点打透心脏的1/2处/ 2023年10月17日 13:47/ 0 赞/ 4 阅读

相关 css columns

在不适用flex布局情况下，实现元素两端对齐：使用 1、columns: width count; 多栏布局 width：列宽度 count：几列

╰半橙微兮°/ 2023年02月14日 02:45/ 0 赞/ 9 阅读

相关 CSS3之栏目column

　　CSS3之栏目column是之前CSS2没有的属性，和背景边框等属性不一样，是之前没有的属性。这个属性是设置有关栏目的一系列数值的属性。CSS3之栏目column的属性主要

落日映苍穹つ/ 2022年09月17日 05:25/ 0 赞/ 306 阅读

相关 HTML5+CSS3-背景渐变、多栏布局column

（13）背景渐变语法：background:-webkit-gradient(linear,0 0,0 100%,from(\fff),to(\000)); 第一个参数：

古城微笑少年丶/ 2022年08月22日 15:13/ 0 赞/ 145 阅读

相关（2）css学习笔记---display-columns

一.display属性 > 内联元素又名行内元素，和其对应的是\[块元素\](block element)，都是html规范中的概念。内联元素的显示，为了帮助理解，可以

爱被打了一巴掌/ 2022年06月02日 08:25/ 0 赞/ 244 阅读

相关 @Column @Basic

@Basic @Target({METHOD, FIELD}) @Retention(RUNTIME) public @interface Basi

偏执的太偏执、/ 2022年05月19日 11:16/ 0 赞/ 160 阅读

相关 css3的多列布局（columns）

多列布局：可以实现web页面像报纸、杂志那样的布局 1. column-count：number；设置列数 2. column-gap：50px | 2em；设置列之间的间

偏执的太偏执、/ 2022年05月09日 05:36/ 0 赞/ 226 阅读

相关 CSS3的Columns

大家都看过报纸，报纸的内容大都是按列排布的。那在前端布局中该怎么实现类似报纸一列一列布局的效果呢？文章目录 columns \`column-width\

今天药忘吃喽~/ 2022年03月12日 13:56/ 0 赞/ 211 阅读

相关 css3新增属性：多列(column)

css3多列能够创建多个列来对文本进行布局，就想报纸那样。关于多列的相关属性及属性值如下： column-count: number|auto;：指定元素应分为的列

我就是我/ 2022年01月07日 10:43/ 0 赞/ 319 阅读

相关 csharp: datatable get Column datatype or Column Name

/// <summary> ///列表名 /// </summary> /// <param n

青旅半醒/ 2021年12月13日 00:51/ 0 赞/ 232 阅读