css3
来源:互联网 发布:梦里花落知多少大结局 编辑:程序博客网 时间:2024/06/14 15:45
兼容性:Safari、Chrome、Firefox等主流浏览器支持。
使用盒布局来解决左右两栏或者多栏中底部不能对齐的问题。
在css3中,通过使用box属性来使用盒布局,使左右两栏或多栏中的div元素的底部对齐;
在Firefox中使用“-moz-box”;在Chrome、Safari中使用“-webkit-box”属性;
例如:
html:
<div id="container"> <div id="left"> <h2>左侧边栏</h2> <ul> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> </ul> </div> <div id="center"> <h2>内容</h2> <p>我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容</p> </div> <div id="right"> <h2>右侧边栏</h2> <ul> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> <li><a href="#">超链接</a></li> </ul> </div></div>
css:
<style> #container { /* 最外层的盒子使用了box属性 */ display: -moz-box; display: -webkit-box; } #left { width: 200px; padding: 20px; background-color: orange; } #center { width: 300px; padding: 20px; background-color: yellow; } #right { width: 200px; padding: 20px; background-color: limegreen; } #left,#center,#right { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }</style>
解析:
多栏布局与盒布局的区别:使用多栏布局时,各栏宽度必须是相等的,在指定每栏宽度时,也只能为所有栏指定一个统一的宽度,栏与栏之间的宽度不可能是不一样的。另外,使用多栏布局时,也不可能具体指定什么栏中显示什么内容,因此比较适合使用在显示文章内容的时候,不适合用于安排整个网页中由各元素组成的网页设计时。
0 1
- css3
- css3
- css3
- css3
- css3
- css3
- CSS3
- CSS3
- css3
- CSS3
- css3
- css3
- CSS3
- css3
- css3
- css3
- css3
- css3
- 四月杂记
- HDU 2544 最短路dijstra算法
- Centos 7.2 安装 Ambari 2.2.2 + HDP 2.4.2 搭建Hadoop集群
- 安卓沉浸式状态栏
- 【JDBC详解】深入
- css3
- 基础知识—函数-默然参数
- 搬运自己的mysql学习笔记2-连接池的使用
- 翻转单词顺序列
- 【Codeforces 132C】 Logo Turtle
- andriod org.apache.http网络通讯
- 将数据库中的数据转换成json格式
- 面向对象实验3-分析类
- Mac 下Android Studio JNI 制作so库