ch8 CSS 3列(等高文本列)
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列(等高文本列)的更多相关文章
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 三列等高 css实现
实现这个三列等高 布局需要最外层的一个div wrap容器 里面有三个div容器 这个最外层div 需要移除隐藏 overflow:hidden; 关键点就是三列div 同时margin-botto ...
- CSS 3列等高
方法1: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"&g ...
- 【CSS】 布局之多列等高
这两天看了不少文章,对于css布局多了一些理解,现在来总结下. 我们来写一个最普遍的Top.Left.Content.Right.Foot布局. 第一步:自然是写一个坯子 <!DOCTYPE H ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- 用css样式围剿等高列问题(转载)
明修栈道暗度陈仓 该秘籍的心法只有十二个字:”隐藏容器溢出,正负内外边距.”看完下面的几行代码,再看这句话你真的可以看到圣光! 隐藏容器溢出.将外层容器的溢出设为隐藏: .container { ov ...
- css奇技淫巧之—多列等高
什么是等高布局? 先来看一个案例: 上图中的页面的主体内容是两列结构,左列是用来导航的,右列是用来显示内容的.我们看到它们有一个共同的边框,中间还有一条分隔线,左右两列的高度都是不固定的.这种情况下就 ...
随机推荐
- ZOJ4110 Strings in the Pocket(2019浙江省赛)
给出两个字符串,询问有多少种反转方法可以使字符串1变成字符串2. 如果两个串相同,就用马拉车算法找回文串的数量~ 如果两个串不同,从前往后找第一个不同的位置l,从后往前找第二个不同的位置r,反转l和r ...
- centos 8 cockpit系统监控
步骤: 1.激活cockpit服务 2.启动cockpit 3.查看cockpit服务是否启动 4.浏览器访问http://192.168.1.10:9090(用户名root,密码123) 5.查看系 ...
- Spring Boot Ftp Client 客户端示例支持断点续传
本章介绍 Spring Boot 整合 Ftpclient 的示例,支持断点续传 本项目源码下载 1 新建 Spring Boot Maven 示例工程项目 注意:是用来 IDEA 开发工具 File ...
- netty同时实现http与socket
(1)启动类 package test; import io.netty.bootstrap.ServerBootstrap; import io.netty.channel.EventLoopGro ...
- 【PAT甲级】1054 The Dominant Color (20 分)
题意: 输入两个正整数M和N(M<=800,N<=600),分别代表一张图片的宽度和高度,接着输入N行每行包括M个点的颜色编号,输出这张图片主导色的编号.(一张图片的主导色占据了一半以上的 ...
- javaweb项目中web.xml配置文件的/和/*的区别
1.拦截"/",可以实现现在很流行的REST风格.很多互联网类型的应用很喜欢这种风格的URL.为了实现REST风格,拦截了所有的请求.同时对*.js,*.jpg等静态文件的访问也就 ...
- Python3.5学习之旅——day5
模块初识 一.定义 在python中,模块是用来实现某一特定功能的代码集合.其本质上就是以‘.py’结尾的python文件.例如某文件名为test.py,则模块名为test. 二.导入方法 我们在这一 ...
- nginx 性能优化的概述及在CPU资源方面的处理
nginx的性能优化的概述 软件层面的提升硬件的使用率 增大CPU的利用率 增大内存的利用率 增大磁盘IO利用率 增大网络带宽利用率 提升硬件规格 网卡:万兆网卡.例如10G.25G.40G等 磁盘: ...
- nginx 的location的匹配顺序
匹配规则 匹配顺序 示例 [root@python vhast]# cat test.conf server { server_name haha.com; #listen 8080; rewrite ...
- PPT页面动画制作
因为武汉新型冠状肺炎的影响,今年自从2月3号开工以来,就在家办公.我的任务刚好是安排做PPT,虽说之前做过PPT,但大家都知道,作为一个IT测试工程师,更多的是测试工作,只有在培训,还有年终汇报的时候 ...