CSS3多栏布局

1.column-count:将一个元素中的内容分成多栏进行显示。

2.column-gap:设定多栏之间的间隔距离。

3.column-rule:栏与栏之间增加一条间隔线。

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS3分栏布局</title>

<style type="text/css">

*{margin:0;padding:0;}

#div{width:500px;column-count:4;-moz-column-count:4;-webkit-column-count:4;column-gap:2em;-moz-column-gap:2em;-webkit-column-gap:2em;column-rule:1px solid red;-moz-column-rule:1px solid red;-webkit-column-rule:1px solid red;}

#div p{text-indent:2em;}

</style>

</head>

<body>

    <div id="div">

        <p>《爸爸去哪儿》是湖南卫视从韩国MBC电视台引进的亲子户外真人秀节目，智理参考自MBC电视台节目《爸爸！我们去哪儿？》，由《变形计》制作人谢涤葵及其团队和《我是歌手》制作人洪涛及其团队联合打造。节目中，五位明星爸爸在72小时的户外体验中，单独照顾子女的饮食起居，共同完成节目组设置的一系列任务。</p>

        <p>第一季节目于2013年8月开始录制，10月11日播出，林志颖父子、王岳伦父女、田亮父女、郭涛父子、张亮父子组成嘉宾阵容，进行农村放羊、野外爬山、上船捕鱼等活动。[1]《爸爸去哪儿第二季》计划于2014年6月推出，并在原来12集的基础上增加至16集，节目播出时间横跨整个暑期档。</p>

    </div>

</body>

</html>

　　

CSS3多栏布局,布布扣,bubuko.com

时间： 2024-10-12 16:22:26

CSS3多栏布局的相关文章

css3 -&gt; 多栏布局

在进行多栏布局时,使用bootstrap的栅格系统可以很轻松的实现效果,其实css3本身也提供了多兰布局的功能. 比如,我们在一个section标签内填充了很多内容,同时希望内容能够显示成三列,那么可以通过如下css来实现(使用chrome浏览器). 设置分栏的数量 section { -webkit-column-count: 3; } 根据宽度分栏 section { -webkit-column-width: 25rem; } 其中rem与em不同,它所表示的字体大小是相对于全局的. 如果

CSS3多栏样式布局

看书的时候,遇到了CSS3一个新的多栏布局样式属性,测试了一下,贴段代码出来: 目前这个属性还是需要带上浏览器内核的私有前缀: 先看html代码: 1 <BODY> 2 <div class='main'> 3 <p>My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read mus

CSS3使用盒模型实现三栏布局

本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏布局的,然而使用 CSS3 的盒模型却显得更简单.更灵活 CSS3盒模型 display: -webkit-box; display: -moz-box; display: box; 将父元素定义成盒模型之后,就可以通过 box-flex 属性来实现布局了. box-flex 主要让子元素针对父元素

CSS3与页面布局学习笔记（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结(一)--概要.选择器.特殊性与刻度单位 目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先级) 3.2.计算特殊性值 四.刻度 4.1.绝对长度单位 4.2.文本相对长度单位 4.3.Web App与Rem 五.示例与帮助下载 web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面

记一道css面试题 : 三栏布局两边宽度固定，中间宽度自适应，并且布局随屏幕大小改变。

前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用一行.像这样 当屏幕大于600px时,是这样 我做出来用了css3的@media,如果不用这个,好吧,水平有限想不出来... 下面是代码: <!DOCTYPE> <html> <head> <style> body{ margin: 0 ; padding: 0

CSS3与页面布局学习总结（四）——页面布局的多种方法

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

多栏布局

水平方向-三栏布局 1.浮动布局 简介:左边固定宽度后左浮动,右边固定宽度后右浮动 .float .left{ float: left; width: 200px; background-color: yellow; } .float .right{ float: right; width: 200px; background-color: green; } .float .center{ background-color: pink; } <section class="float&qu

html5/css3响应式布局介绍及设计流程

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页,当你用不同的终端来查