css自适应宽度高级写法:一行多列~~~某些列的宽度是固定值
aaarticlea/png;base64,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" alt="" />
一行有5列,第2、4列宽度150px,其他3列平均分配剩下的宽度:
思路:设置1、3、5宽度为33.33%-100px,3列的宽度就是99.99%-300px,再加上2、4列的宽度和300px,5列的宽度和≈100%,用这个思路可以应付各种复杂的自适应布局。
方法:但是宽度没有33.33%-100px这种写法,所以要用marging减少宽度,还要padding来减少自己内容宽度,避免内容与旁边的重叠
注意:box-sizing: border-box;这个属性是保证宽度不受padding影响
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>col</title>
</head>
<style>
html,body{padding:0; margin:0}
div{ float:left; word-break:break-all}
.c2{width:150px;background:#FCF;}
.c4{width:150px;background:#0CF;}
.c1,.c3,.c5{
width:33.33%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.c3,.c5{
margin-left:-100px;
padding-left:100px;
}
.c1{
margin-right:-100px;
padding-right:100px;
}
</style>
<body>
<div class="c1">111111111111111111111111111111111111111111111111</div>
<div class="c2">2222222222222222222222222222</div>
<div class="c3">333333333333333333333333333333333333333333333333</div>
<div class="c4">4444444444444444444444444444</div>
<div class="c5">555555555555555555555555555555555555555555555555</div>
</body>
</html>
css自适应宽度高级写法:一行多列~~~某些列的宽度是固定值的更多相关文章
- delphi7列宽自定设置为固定值
- CSS自适应宽度的高级应用,一般人不会告诉你。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAxgAAACdCAIAAAC4iknFAAAgAElEQVR4nO2d3VsTV7uH51/wqhKotn
- css实现三列布局,左右固定值,中间自适应。
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- 这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
- ## GridView 布局:item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##
一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...
- css 自适应布局阮一峰
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
- css 自适应布局
转载一篇文章: 自适应网页设计(Responsive Web Design) 作者: 阮一峰 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小 ...
- div css 自适应
怎样实现响应式布局? 对于这个问题,我们可以通过CSS3中的Media Query来实现,即媒介查询.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受 ...
随机推荐
- Alipay秘钥问题
有三种秘钥一个是应用公钥 一个是支付宝公钥 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco } span.s1 { text-d ...
- java面试题总汇
coreJava部分 7 1.面向对象的特征有哪些方面? 7 2.作用域public,private,protected,以及不写时的区别? 7 3.String 是最基本的数据类型吗? 7 4.fl ...
- iOS企业分发证书制作
自签名证书制作流程 打开终端,输入 openssl genrsa - ,生成名称为ca的秘钥 注:openssl生成的文件皆放在用户文档下(finder菜单栏'前往' - 电脑 -Macintosh ...
- splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素: <script type="text/javascript"> var arr = new Ar ...
- Cocoapods - pod install 成功后找不到头文件解决
问题描述:使用Cocoapods时,import 找不到头文件. 问题原因:这是因为还没设置头文件的目录. 解决办法:在项目的Target的里设置一下,添加cocoapods头文件目录:目录路径直接写 ...
- Linux创建定时任务
例如: 要求每天23:59分备份lampp日志: 备份的文件名以当时的时间命名 格式为:201612241852_acces.log 备份到:/tmp/logs/目录下 1.新建shell脚本:vim ...
- gulp如何使用
简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...
- JS模块化
一.原始写法 /* 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 上面的函数m1()和m2(),组成一个模块.使用的时候,直接调用就行了. ...
- 【NodeJS】环境变量配置
安装完Node后,NodeJS自带npm.于是我照着网上的教程想搭一个脚手架.结果报错: ’node’ 不是内部或外部命令,也不是可运行的程序 但是我检查了一下系统环境变量,path底下有正确引用no ...
- ghoest32 不重启电脑手动备份系统为.gho
备份系统我们一般使用DOS之家的ghoest备份工具,但备份必须是重启电脑在DOS命令行下,其实,可以不重启电脑备份系统,也就是手动备份系统.DOS之家用的ghoest本质也是赛门铁克公司出的ghoe ...