文档章节

css3 box-sizing:border-box 实现div一行多列

qimh
 qimh
发布于 06/25 19:11
字数 125
阅读 10
收藏 0
<!DOCTYPE html>
<html>
<head>
<style> 
div.container
{
  background:green;
  padding:10px 10px;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:33.33%;
border:2px solid red;
float:left;
}

div.container:after{
	display:block; 
	content:"."; 
	height:0; 
	clear:both; 
	overflow:hidden; 
	visibility:hidden;
}
</style>
</head>
<body>

<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>

</body>
</html>

参考链接:http://www.w3school.com.cn/cssref/pr_box-sizing.asp

© 著作权归作者所有

共有 人打赏支持
qimh
粉丝 8
博文 365
码字总数 66116
作品 0
滁州
程序员
CSS3 Box-sizing的理解

box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒...

柠檬酷
2015/09/16
51
0
Border box-sizing resize

box-sizing,这个属性可以定义元素盒子的解析方式,从而可 以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。 //设置 border-box 让 border 和 padding 不在额外增加元素大小 asid...

菜鸟不菜么
05/01
0
0
WEB前端学习面试:用CSS画一个等边三角形

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/30
0
0
CSS3中的box-sizing属性

box-sizing属性是css3中新添加的属性,用来替换原来的css盒子模型,box-sizing属性值的不同,元素的高度和宽度的计算方法也不同。 在默认情况下,设置的和属性都是指元素内容(content box)...

4fun
2017/10/28
0
0
提升你设计水平的CSS3新技术

前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

web打印控件 LODOP的详细api

web打印控件 LODOP的详细api

wangxujun59
55分钟前
2
0
从一次小哥哥与小姐姐的转账开始, 浅谈分布式事务从理论到实践

分布式事务是个业界难题,在看分布式事务方案之前,先从单机数据库事务开始看起。 什么是事务 事务(Transaction)是数据库系统中一系列操作的一个逻辑单元,所有操作要么全部成功要么全部失...

中间件小哥
57分钟前
6
0
荣登Github日榜!微信最新开源MMKV

MMKV 开源当日即登Github Trending日榜,三日后荣登周榜。MMKV 在腾讯内部开源半年,得到公司内部团队的广泛应用和一致好评。 MMKV 是基于 mmap 内存映射的移动端通用 key-value 组件,底层序...

腾讯开源
今天
5
0
前端取色工具:jcpicker

http://annystudio.com/software/colorpicker/#jcp-download

轻量级赤影
今天
1
0
Swift - 将图片保存到相册

import Photos func loadImage(image:UIImage) { UIImageWriteToSavedPhotosAlbum(image, self, #selector(saveImage(image:didFinishSavingWithError:contextInfo:)), ni......

west_zll
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部