探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要。无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset。
05 |
body, h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , hr, p, blockquote, /* structural elements 结构元素 */ |
06 |
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ |
07 |
pre , /* text formatting elements 文本格式元素 */ |
08 |
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ |
09 |
th, td /* table elements 表格元素 */ { |
15 |
button, input, select, textarea /* for ie */ { |
16 |
font : 12px / 1.5 tahoma , arial , \ 5 b 8 b\ 4 f 53 , sans-serif ; |
18 |
h 1 , h 2 , h 3 , h 4 , h 5 , h 6 { font-size : 100% ; } |
19 |
address, cite, dfn, em, var { font-style : normal ; } /* 将斜体扶正 */ |
20 |
code , kbd, pre , samp { font-family : courier new, courier , monospace ; } /* 统一等宽字体 */ |
21 |
small { font-size : 12px ; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ |
23 |
ul, ol { list-style : none ; } |
25 |
a { text-decoration : none ; } |
26 |
a:hover { text-decoration : underline ; } |
27 |
sup { vertical-align : text-top ; } /* 重置,减少对行高的影响 */ |
28 |
sub { vertical-align : text-bottom ; } |
30 |
legend { color : #000 ; } /* for ie6 */ |
31 |
fieldset, img { border : 0 ; } /* img 搭车:让链接里的 img 无边框 */ |
32 |
button, input, select, textarea { font-size : 100% ; } /* 使得表单元素在 ie 下能继承字体大小 */ |
35 |
table { border-collapse : collapse ; border-spacing : 0 ; } |
声明DTD:
使用display:inline-block属性
将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。我们知道在IE6.0以及IE7.0是使用了一个has layout的概念。使用display:inline-block仅仅触发了块状元素的has layout属性。而DIV本身就是块状元素,所以在IE<8.0 下依然会出现换行的情况。
解决问题:先将块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout去hack IE7.0-;
1 |
div{ display :inline- block ;zoom: 1 ;* display : inline ;} |
HTML
2 |
< div class = "subMenuLeft" ></ div > |
3 |
< div class = "mainBoxCenter" > |
5 |
< div class = "infoRight" > |
CSS
05 |
div.subMenuLeft,div.mainBoxCenter,div.infoRight{ |
07 |
zoom: 1 ; * display : inline ; /*fix ie<8*/ |
使用float负边距的布局
该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧。
由此我们知道可以设置三个DIV默认全部向左浮动,然后设置后两个DIV的margin属性让其显示到必要的位置。
2 |
< div class = "mainBoxCenter" > |
5 |
< div class = "subMenuLeft" > |
7 |
< div class = "infoRight" > |
- 设置div.content的宽度为100%,充满整个窗口,并向左浮动;
- 设置div.mainBoxCenter的左外边距以及右外边距分别等于要显示的两个DIV的宽度;
- 设置div.subMenuLeft向左浮动,并且margin-left:100%;这样subMenuLeft偏移到屏幕的最左方;
- 设置div.infoRight向左浮动,并且margin-left值为自身的宽度,这样infoRight便偏移到屏幕的右侧。
05 |
div.subMenuLeft,div.infoRight{ |
最新文章
- linux 查找文件和搜索文件
- Entity Framework Code First 中使用 Fluent API 笔记。
- stanford-parser使用说明
- WCF客户端关闭代码
- GIT 中提示 please tell me who you are
- pat 1062. Talent and Virtue (25)
- OA 权限控制
- uber奖励和账单详解
- CF(435D - Special Grid)dp
- R语言——基本绘图函数
- Servlet RequestDispatcher需要注意的情况
- 微信小程序之实现slideUp和slideDown效果和点击空白隐藏
- Hadoop介绍
- 第二节 pandas 基础知识
- 常用的sort打乱数组方法真的有用?
- ";java.lang.IllegalStateException: No instrumentation registered! Must run under a registering instrumentation.";问题解决
- springboot(六)SpringBoot问题汇总
- keras学习简单线性回归【1】
- bzoj3930
- root和alias的区别
热门文章
- Selenium(Python) ddt读取Excel文件数据驱动
- 【wx:if】小程序条件渲染的使用说明
- Java学习 &#183; 初识 容器和数据结构
- DataSet转化为DataTable
- [C++] Class (part 1)
- Sublime Text 插件之:MarkDown
- 第一课——从main到WinMain
- 模拟Excel同一列相同值的单元格合并
- 一个demo让你彻底理解Android中触摸事件的分发
- 《学习OpenCV》课后习题解答2