html5——多列布局】的更多相关文章

基本概念 1.多列布局类似报纸或杂志中的排版方式,上要用以控制大篇幅文本. 2.跨列属性可以控制横跨列的数量 /*列数*/ -webkit-column-count: ; /*分割线*/ -webkit-column-rule: dashed red; /*列间距*/ -webkit-column-gap: 20px; /*列宽度*/ -webkit-column-width: 300px; /*跨列*/ -webkit-column-span: all; <!DOCTYPE html> &l…
因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局方法.共提供了五种布局方式,各自是:ui-gird-solo:单列布局,ui-gird-a:双列布局,ui-gird-b:三列布局,ui-gird-c:四列布局,ui-gird-d:五列布局.布局网格总宽度100%,全然不可见(无边框无背景),没有不论什么内边距或外边距,不会对网格中的内容产生不论什…
p{    text-indent: 2em;    line-height: 2em;}h4{    -webkit-column-span:all;    background: green;    text-align: center;}section{    padding: 10px;    background: rgba(180,60,30,0.6);    /*column-width: 200px;*/    /*    -webkit-column-width:200px;*…
学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一.早期多列问题 我们有时想布局成报纸.杂志那样的多列方式(至少两列,一般三列以上),但早期 CSS 提供的布局方式都有着极大的限制.如果是固体布局,那么使用浮动或定位布局都可以完成.但对于流体的多列,比如三列以上,那只能使用浮动布局进行,而它又有极大的限制.因为它是区块性的,对于动态的内容无法伸缩自适应,基本无能力.…
1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像杂志或报纸那样,网页版面的设计延续了传统纸媒的特点,但又比传统的纸媒更灵活,传统的纸媒由于纸张大小的限制,只能在有限的空间内排列内容,而网页版面的布局,可以根据内容自适应宽度和高度.在 HTML 中,常使用 div 元素来创建多列,使用 CSS 对元素进行浮动.定位等,从而将网页设计稿中的布局样式呈…
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适应,这个时候我就想到了两列布局,将左右设置float,左边设置固定宽度,右边的宽度为calc(100% - 左边的宽度),把这两种布局结合使用就可以实现效果.…
/*css3中的布局*/ .wrapper{ margin:auto; width:300px; height:200px; border:2px dotted blue; -webkit-columns:15px 3;/*表示多列布局,每一列15px 有3列,内容多于3列则该参数失效!例如对一篇文章可以进行多列布局显示*/ ; -webkit-column-width:15px;/*将width和count属性拆开来单独使用,弱拆开且同时使用,浏览器根据具体情况会可能会使某一属性失效*/ -w…
display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css3布局属性,遗憾的是只有谷歌和火狐支持,中国人常用的手机上的浏览器几乎全军覆没,UC浏览器不支持,安卓4.1.1和之前版本手机自带的浏览器也不支持,微信自带浏览器也不支持. 示例: html,body{ padding:0; margin:0;} /* flex-flow: row wrap; ro…
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left"></div> <div class="right"></div> css部分 .left { position: absolute; /*这可以换成float:left,都可以使其脱离文档流*/ height: 100px; width:…
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中间自适应.两列定宽一侧自适应.中间定宽两侧自适应.一侧定宽两列自适应和三列自适应这五种情况 两侧定宽中间自适应布局 思路一:  float [1]float + margin + calc <style> p{margin: 0;} .parent{overflow: hidden;} .left…
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来说,就是CSS3多列布局可以自动将内容按指定的列数排列,这种特性实现的布局效果和报纸.杂志类排版非常相似.本文将详细介绍CSS多列布局的基本属性和用法 列宽 column-width主要用于给元素指定最优的列宽度,实际列宽可能会更宽或更窄.如果不设置高度,文字将自动撑满整列,且最后一列的标点会溢出到…
这是经典的列布局:                  <x:Panel runat=                     <Items>                       <x:Panel runat=                  <x:Panel Height=                 </x:Panel>              </Items>          </x:Panel> 17     <…
为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现.接下来咱们一起学习多列布局相关的知识. 语法: columns:<column-width> || <column-count> 多列布局column…
网站上使用三列布局的还是比较多的,不过三列和两列有些相似: 1.自适应三列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三列自适应布局</title> </head> <style> .wrapper{ width: 880px; height: 300px; margin:0…
我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>两列之自适应布局</title> </head> <style> .left{ float: left; width: 20%; heig…
在我们浏览网页中经常看见一列布局其实一列布局就是 一般的一列布局的都是固定宽度的 body{margin:0;padding:0} .main{width:800px;height:300px;background:#ccc;margin:0 auto} <body> <div class="main"></div> </body> margin: 0 auto 就是给div水平居中对齐 在一般做开发的时候,不会设置高度,这里是为了凸显是…
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>横向两列布局</title> <style type=&…
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css3布局属性,遗憾的是只有谷歌和火狐支持,中国人常用的手机上的浏览器几乎全军覆没,UC浏览器不支持,安卓4.1.1和之前版本手机自带的浏览器也不支持,微信自带浏览器也不支持…
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>多列布局</title> <style> div{ -moz- Firefox的前缀 -webkit- Chrome和safari -ms- IE -o- opera /*-moz-column-width:150px;自动设置列数 -moz-col…
css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. column-gap:定义列间距. column-rule:定义列边框. column-rule-width:定义列边框的宽度. column-rule-style:定义列边框的样式. column-rule-color:定义列边框的颜色. column-span:定义子元素跨列效果. column-…
1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局,其实和两列.三列的布局模式是一样的. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三列布局</title> <style> *{m…
1.宽度自适应两列布局 两列布局可以使用浮动来完成,左列设置左浮动,右列设置右浮动,这样就省的再设置外边距了. 当元素使用了浮动之后,会对周围的元素造成影响,那么就需要清除浮动,通常使用两种方法.可以给受到影响的元素设置 clear:both,即清除元素两侧的浮动,也可以设置具体清除哪一侧的浮动:clear:left 或 clear:right,但必须清楚的知道到底是哪一侧需要清除浮动的影响.也可以给浮动的父容器设置宽度,或者为 100%,同时设置 overflow:hidden,溢出隐藏也可以…
三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'margin'属性.并且'中间'部分不用设置'width'.例如: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org…
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中都能通过验证. 问题的症结所在 如上图所示,由于各列的内容不一致导致其背景的高度也不统一.而背景实质上是内容(标准的盒子模型是由内容区,补白区,边框区与边界区组成,背景存在于前三者中:IE为前两者)的自适应的问题.再转化一下,如何撑大那些较短的列的高度,让所有列的高度等于最高的列的高度?这个,的确很…
今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现.首先创建html代码如下: <style>#side { background-color:#99F…
今天我们开始学习一列布局,包含以下几种形式: 1.一列固定宽度 2.一列固定宽度居中 3.一列自适应宽度 4.一列自适应宽度居中 5.一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分,今天我们正式开始使用网页制作软件——adobe公司出品的dreamweaver来开始网页设计之旅.相信之前您已经用过这个软件了,具体怎么使用我就不讲了.为了照顾部分朋友,今天课程的css部分我们是以可视化生成方式,不过建议大家能手写的尽量还是手写,这样有助于提高效率. 一.一列固定宽度我们先看一下一…
1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>一列布局自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览…
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三列自适应</title> <style type="text/c…
<!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" />        <title>css两列布局,一边固定宽度,另一边自适应</title>    </head>    <style>        a, body, center, cite, code, dd, del, div, dl, dt, e…
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>三列布局,左右固定值,中间自适应</title> <style type="text/css"> .container{p…