margin在多栏布局上的应用
来源:互联网 发布:3d样板房软件 编辑:程序博客网 时间:2024/06/05 21:50
左栏定宽,右栏自适应 方法一 使用浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左栏定宽,右栏自适应 方法一 使用浮动</title> <style> div { width: 400px; } div img { width: 200px; float: left; } div div { margin-left: 200px; } </style></head><body> <div> <img src="images/image1.jpg"> <div>如上例这类布局效果(左边一个固定图片,右边为内容),负margin能够替代float浮动布局,进行左右布局规划,并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮,这个是做什么用的呢?你可以使用标准浏览器查看上方例子,依次点击变宽按钮至宽度最大,再点击不设置最小宽度按钮,你会发现出现了一个Bug。负margin用作布局效果的确有其独到之处,但自身也有一个小的缺陷,即如果内部最后一个子元素使用负margin上移后,由于父元素是其边距元素,其实际高度由于内部子元素上移也会跟着变小。解决方式就是设置一个最小高度,最小高度值为较小的固定元素高度(此例即为左边固定的图片高度),就可彻底解决负margin上移影响父元素高度Bug。</div> </div></body></html>
左栏定宽,右栏自适应 方法二 使用负margin
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左栏定宽,右栏自适应 方法二 使用负margin</title> <style> *{ margin: 0; padding: 0; } div.box { width: 80%; border: 1px solid; min-height: 200px; _height: 200px; /*IE6一下兼容*/ } img { width: 200px; height: 120px; } p { margin-left: 210px; margin-top:-120px; } </style></head><body> <div class="box"> <img src="images/image.jpg"> <p class="content">如上例这类布局效果(左边一个固定图片,右边为内容),负margin能够替代float浮动布局,进行左右布局规划,并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。你或许也发现了第三个“不设置最小宽度”按钮,这个是做什么用的呢?你可以使用标准浏览器查看上方例子,依次点击变宽按钮至宽度最大,再点击不设置最小宽度按钮,你会发现出现了一个Bug。负margin用作布局效果的确有其独到之处</p> </div></body></html>
多栏等高布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多栏等高布局</title> <style> div.box { width: 80%; margin: 0 auto; overflow:hidden; /* overflow 除了超出包含快隐藏之外,还有清理浮动 */ } div[class*="content"]{ float: left; padding-bottom: 1000px; margin-bottom: -1000px; /*这两行代码是关键 padding-bottom: 1000px; 这个1000是随便设置的 选择padding的目的是因为padding区域有背景色 margin-bottom: -1000px;通过这个设置,一个是 使包含快的下边界向上移动1000px,二一个是因为要将下padding全部通过包含快overflow给隐藏掉,如果想使这三个元素有下padding值比如200px的话,可以将margin-bottom: -800px */ } div.content1 { width: 20%; background-color: darkred; } div.content2 { width: 60%; background-color: yellowgreen; } div.content3 { width: 20%; background-color: blueviolet; } </style></head><body> <div class="box"> <div class="content1"> <p> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文 </p> </div> <div class="content2"> <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </p> </div> <div class="content3"> <p> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </p> </div> </div></body></html>
左右固定中间自适应
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>左右固定中间自适应</title> <style> div { height: 100px; } .box { width: 80%; margin: 0 auto; } .left,.right { width:200px; } .left { float: left; background-color: yellowgreen; } .center { margin: 0 220px; background-color: blueviolet; } .right { float: right; background-color: greenyellow; } </style></head><body> <div class="box"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div></body></html>
0 0
- margin在多栏布局上的应用
- 负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- 负值之美:负margin在页面布局中的应用
- margin为负值产生的影响和常见布局应用
- Html+CSS__margin 负值之美:负margin在页面布局中的应用
- margin击穿问题(子元素的margin值作用在父元素上)
- FrameLayout 的 margin 在 2.x 上不生效
- margin负值的布局使用
- 透明度,margin为负数的应用,圣杯布局,倒三角
- margin布局
- UVA 11732 "strcmp()" Anyone(字典树+左儿子-右兄弟表示法)
- 函数的参数为引用和指针的区别
- code forces 1A
- 两个有序数组求中位数
- Linux下静态库和动态库
- margin在多栏布局上的应用
- Java内部类详解
- C#并行编程-Task
- Android中数据存储的三种方式--基础
- ES的zen探索方法
- 安装Ecshop v2.7.3
- UI界面 控件
- 使用IDEA maven搭建SSM框架
- 【Spring】使用数据源连接池访问数据库