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奇技淫巧之—多列等高
什么是等高布局? 先来看一个案例: 上图中的页面的主体内容是两列结构,左列是用来导航的,右列是用来显示内容的.我们看到它们有一个共同的边框,中间还有一条分隔线,左右两列的高度都是不固定的.这种情况下就 ...
随机推荐
- 三天的Python课程
基础很sb但必须熟练掌握: 第一天就是Python的简单介绍与简单的接触.基本都是概念性的东西,需要知道一个非常便捷的IDE工具:pycharm,以后的编程就靠它了.还有就是%s和%d的格式化输出.运 ...
- MAVLINK协议
参考https://cloud.tencent.com/developer/news/48344 https://www.cnblogs.com/lovechen/p/5801679.html htt ...
- Windows平台VC++ 6.0 下的网络编程学习 - 简单的测试winsock.h头文件
最近学习数据结构和算法学得有点累了(貌似也没那么累...)...找了本网络编程翻了翻当做打一个小基础吧,打算一边继续学习数据结构一边也看看网络编程相关的... 简单的第一次尝试,就大致梳理一下看书+自 ...
- Redis数据的导出和导入(dump和load方式)
迁移redis数据一般有如下3种方式: 第三方工具redis-dump,redis-load aof机制,需要开启aof功能 rdb存储机制 这里介绍第一种方式,通过redis-dump导出数据,再通 ...
- 【快学Docker】Docker镜像相关操作
前言 镜像是Docker的三大核心概念之一(另外两个分别是:容器和仓库). Docker运行容器前需要本地存在镜像,如果本地不存在镜像,Docker则会尝试从远端仓库拉去镜像.镜像是Docker一大核 ...
- 常用FTP命令汇总
FTP是File Transport Protocol的简称,其作用是使连接到服务器上的客户可以在服务器和客户机间传输文件.除WWW服务外,FTP也算是使用最广泛的一种服务了.在cmd中ftp命令很多 ...
- python爬虫(九) requests库之post请求
1.方法: response=requests.post("https://www.baidu.com/s",data=data) 2.拉勾网职位信息获取 因为拉勾网设置了反爬虫机 ...
- 浅谈区块链和p2p网络
最近对区块链产生了兴趣就去了解了一下,分享一下.... 首先要先了解一下什么叫做区块链: 区块链:简单来说就是一种基于分布式数据存储.点对点传输.共识机制.加密算法等计算机技术的新型应用模式. 相信说 ...
- Linux centosVMware Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl
一.Nginx负载均衡 vim /usr/local/nginx/conf/vhost/load.conf // 写入如下内容 upstream qq_com { ip_hash; 同一个用户始终保持 ...
- shell 脚本通过Webhook 发送消息到微信群
代码如下: #!/bin/sh # Filename: msg.sh # # Usage msg.sh "message text" # # 1. check if missing ...