美文网首页
文本多栏布局

文本多栏布局

作者: GOD_4239 | 来源:发表于2019-10-31 22:48 被阅读0次

文本多栏布局:column

column-width:每一栏的宽度

默认随总数大小改变

column-count:设置的总栏数

默认随宽度变化而变化

column-gap : 栏与栏之间的宽度

影响每栏的宽度

column-rule : 分隔线

column-rule-color : 分隔线的颜色
column-rule-width : 分隔线的宽度
column-rule-style : 分隔线的样式
column-rule : color width style
分隔线不占位, 不会对周边有影响

column-span: 栏的合并

1 : 占一栏
all : 占所有栏 合并栏
示例:

<div class="box">
        <p>
                我今天很荣幸能和你们一起参加毕业典礼,斯坦福大学是世界上最好的大学之一。我从来没有从大学中毕业。说实话,今天也许是在我的生命中离大学毕业最近的一天了。今天我想向你们讲述我生活中的三个故事。不是什么大不了的事情,只是三个故事而已。
                第一个故事是关于如何把生命中的点点滴滴串连起来。
                我在Reed大学读了六个月之后就退学了,但是在十八个月以后——我真正的作出退学决定之前,我还经常去学校。我为什么要退学呢?
                故事从我出生的时候讲起。我的亲生母亲是一个年轻的,没有结婚的大学毕业生。她决定让别人收养我, 她十分想让我被大学毕业生收养。所以在我出生的时候,她已经做好了一切的准备工作,能使得我被一个律师和他的妻子所收养。但是她没有料到,当我出生之后,律师夫妇突然决定他们想要一个女孩。 所以我的生养父母(他们还在我亲生父母的观察名单上)突然在半夜接到了一个电话:“我们现在这儿有一个不小心生出来的男婴,你们想要他吗?”他们回答道:“当然!”但是我亲生母亲随后发现,我的养母从来没有上过大学,我的父亲甚至从没有读过高中。她拒绝签这个收养合同。只是在几个月以后,我的父母答应她一定要让我上大学,那个时候她才同意。
                在十七岁那年,我真的上了大学。但是我很愚蠢的选择了一个几乎和你们斯坦福大学一样贵的学校, 我父母还处于蓝领阶层,他们几乎把所有积蓄都花在了我的学费上面。在六个月后, 我已经看不到其中的价值所在。我不知道我想要在生命中做什么,我也不知道大学能帮助我找到怎样的答案。 但是在这里,我几乎花光了我父母这一辈子的所有积蓄。所以我决定要退学,我觉得这是个正确的决定。不能否认,我当时确实非常的害怕, 但是现在回头看看,那的确是我这一生中最棒的一个决定。在我做出退学决定的那一刻, 我终于可以不必去读那些令我提不起丝毫兴趣的课程了。然后我还可以去修那些看起来有点意思的课程。
                
        </p>
    </div>

style:

<style>
        .box{
            width: 1000px;
            height: 600px;
            /* 设置分三栏 */
            column-count: 3;
            /* 栏与栏之间的宽度 */
            column-gap:20px;
            /* 分隔线的颜色 */
            column-rule-color:red;
            /* 分隔线的宽度 */
            column-rule-width:10px;
            /* 分隔线的样式 */
            column-rule-style:dashed;
            border: 1px solid black;
        }
    </style>
image.png

相关文章

  • 文本多栏布局

    文本多栏布局:column column-width:每一栏的宽度 默认随总数大小改变 column-count:...

  • 布局

    单栏布局两栏布局三栏布局风景列表卡片

  • CSS布局分类

    两栏布局 三栏布局 双飞翼布局 圣杯布局

  • vip10-1211作业

    单栏布局 三栏布局三栏布局自己又简化写了一遍 圣杯布局 双飞翼布局

  • Flex布局

    四栏布局 两栏布局 三栏布局 平均布局 flex布局 flex-direction:定义主轴方向 row: 元素摆...

  • 入门任务11

    单栏布局三栏布局圣杯布局双飞翼布局页面范例

  • CSS布局

    单栏布局三栏布局圣杯布局双飞翼布局代码五

  • CSS布局

    1. 单栏布局 inline-block Flex布局 2. 两栏布局 Float布局 Flex布局 3. 三栏布...

  • 入门任务11

    1、实现一个单栏布局 单栏布局 2、实现一个三栏布局 三栏布局 3、实现一个圣杯布局 圣杯布局为什么?.main{...

  • CSS中的圣杯布局和双飞翼布局的实现,以及它们的异同

    首先谈谈三栏布局 三栏布局长什么样子?三栏布局是左右两侧浮动,而中间宽度自适应不浮动做出的效果。三栏布局 三栏布局...

网友评论

      本文标题:文本多栏布局

      本文链接:https://www.haomeiwen.com/subject/xvsxbctx.html