文档章节

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

qimh
 qimh
发布于 06/25 19:11
字数 125
阅读 19
收藏 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
粉丝 9
博文 387
码字总数 69331
作品 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
子div自适应父级元素剩余空间

以如下问题为例,给出两种解决方案: 问题:一个div占据浏览器整个视窗,内部一div宽高固定时,如何实现另一内部div自适应剩余空间? <div class="farther-panel"> <div class="childA-cls">...

海礁
2017/10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 钱不还,我就当你人不在了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bigleaf的单曲《小鹿》 《小鹿》- Bigleaf 手机党少年们想听歌,请使劲儿戳(这里) 周日在家做什么? 做手工呀, @poorfis...

小小编辑
16分钟前
8
1
EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
17
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
20
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
24
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部