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

<h1>Socrates</h1>
<div class="col">
<p>After philosophizing for a while......</p>
</div>

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

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

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

ch8 CSS 3列(等高文本列)的更多相关文章

  1. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  2. 三列等高 css实现

    实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden;  关键点就是三列div 同时margin-botto ...

  3. CSS 3列等高

    方法1: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g ...

  4. 【CSS】 布局之多列等高

    这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...

  5. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  6. 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高

    代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...

  7. CSS技巧 (2) · 多列等高布局

    前言  最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...

  8. 用css样式围剿等高列问题(转载)

    明修栈道暗度陈仓 该秘籍的心法只有十二个字:”隐藏容器溢出,正负内外边距.”看完下面的几行代码,再看这句话你真的可以看到圣光! 隐藏容器溢出.将外层容器的溢出设为隐藏: .container { ov ...

  9. css奇技淫巧之—多列等高

    什么是等高布局? 先来看一个案例: 上图中的页面的主体内容是两列结构,左列是用来导航的,右列是用来显示内容的.我们看到它们有一个共同的边框,中间还有一条分隔线,左右两列的高度都是不固定的.这种情况下就 ...

随机推荐

  1. python setattr()、getattr()、hasattr() 函数用法介绍

    一.函数介绍 在动态检查对象是否包含某些属性(包括方法〉相关的函数有如下几个: hasattr(object,name):检查 object 对象是否包含名为 name 的属性或方法. getattr ...

  2. python查看包路径及对象的所有方法名

    进入python环境: python 输入如下代码: import sys sys.path = sys.path[:] import django print(django.__path__) 得到 ...

  3. 转发-[原创]ASR1K 在Rommon导入IOS-XE启动

    在相对较老的设备平台可以通过在rommon下使用以下命令导入IOS. rommon 1 > IP_ADDRESS=192.168.1.2rommon 2 > IP_SUBNET_MASK= ...

  4. 学校实训作业:Java爬虫(WebMagic框架)的简单操作

    项目名称:java爬虫 项目技术选型:Java.Maven.Mysql.WebMagic.Jsp.Servlet 项目实施方式:以认知java爬虫框架WebMagic开发为主,用所学java知识完成指 ...

  5. ➡️➡️➡️IELTS reading by Simon on Bili

    高分必备 雅思考官Simon手把手教你做阅读 p1 https://www.bilibili.com/video/av40131278?p=2 p2 https://www.bilibili.com/ ...

  6. 阅读build to win的个人感想

    一个程序员要向各个方面学习,向市场.向用户学习等,不能局限于一方面.除此以外还要有自己的想法,要懂得创新,也需要在各个方面都有所突破,有所超越,实力才是取得胜利的根关键.

  7. TortoiseGit 安装与配置

    2. TortoiseGit安装与配置 标签: TortoiseGit安装配置Windows 2014-12-01 15:25 135739人阅读 评论(10) 收藏 举报 .embody{ padd ...

  8. git切换分支导致代码丢失找回(git reflog找回错误的重置)

    1.使用git reflog查看日志 2.切换到丢失的分支 3. 创建一个临时分支  如(diff),并切换到dev(原分支),然后合并diff到dev分支 4.查看状态 5.强制合并,然后提交到de ...

  9. hdoj6708 2019 CCPC网络选拔赛 1007 Windows Of CCPC

    #include <cstdio> #include <iostream> #include <algorithm> using namespace std; ch ...

  10. 重新理解CEO的学习能力----HHR计划----以太入门课--第一课

    一共5个小节. 第一节:开始学习 1,投资人最看重的一点:CEO的学习能力. (因为CEO需要:找优秀的合伙人,需要市场调研,机会判断,组建团队,验证方向,去融资,冷启动,做增长,解决法务,财务,税务 ...