美文网首页
CSS 3列(等高文本列)

CSS 3列(等高文本列)

作者: 陆lmj | 来源:发表于2017-09-11 10:17 被阅读0次

css 3可以创建等高文本列,通过column-count、column-width、column-gap属性实现。假设标记如下:

<h1>Socrates</h1>
<div class="col">
<p>After philosophizing for a while, Socrates decided that he was tired of constantly asking questions in response to other questions. Consequently, he decided to form his own rock group, the Socratic Four, which consisted of Aristotle on the drums, Plato on bass, Euclid on lead guitar, and Socrates himself on vocals. The group actually became very successful, touring Greece for about 2 years, and earning god-like status in Athens. At one point, there were plans for a huge mega-concert on Mount Olympus to celebrate the band. However, these plans were cut short when Plato abruptly left the band, citing philosophical differences with Socrates as the major reason for breakup. After the demise of the Socratic Four, Socrates continued to tour with a backup band, performing vocals for the Four's greatest hits.</p>
</div>

下面的规则创建一个三列布局,每列的宽度为14em,列之间有2em的间距。CSS列的优点之一是在可用的空间小于已定义列的宽度时的处理方式,列不会像使用浮动时那样回绕,而是会减少列数,因此,如果空间不够显示三列,就会减少到两列。

.col {
    -moz-column-count: 3;
    -moz-column-width: 14em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #ccc;
    -webkit-column-count: 3;
    -webkit-column-width: 14em;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 1px solid #ccc;
}

可以发现浏览器对CSS列的支持还不广泛,因此,除了常规代码,还需要使用特定于浏览器相关的扩展。

相关文章

  • CSS 3列(等高文本列)

    css 3可以创建等高文本列,通过column-count、column-width、column-gap属性实现...

  • 2018-08-30日前端面试题

    点击查看源码 1、css实现两列布局 1.右侧固定宽度,左侧自适应屏幕宽度;2.左右两列等高布局;3.左右两列的高...

  • 2018-03-19 css 实现左列定宽,右列自适应宽度,等高

    上次面试提到了一个css布局:实现左列定宽,右列自适应宽度,等高布局上次没有答出来,只实现了左列定宽,右列自适应宽...

  • jQuery 学习笔记

    1. 两列等高布局如果使用了两个CSS列,使用此种方式可以是两列的高度相同。 2. 检测浏览器 3. 返回顶部按钮...

  • CSS3 多列

    CSS3可以将文本内容设计成像报纸一样的多列布局,如下实例: 一、多列的属性 以下几个为CSS3的多列属性: ·c...

  • CSS columns多列布局 实现瀑布流布局效果

    CSS columns多列布局规范经常被忽略,我们可以通过CSS columns实现类似报纸上的文本内容排版一般亦...

  • CSS3 多列

    通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 一、column-count 创建多列 co...

  • CSS3 多列

    CSS3 多列 CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例: 浏览器支持 表格中的数字表示支持该...

  • 多列文本(CSS3)

  • CSS-多列布局1-概述

    1、多列布局概述 通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 2、常用属性 3、常用属性...

网友评论

      本文标题:CSS 3列(等高文本列)

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