探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要。无论是什么，我们在写CSS之前首先引入reset.css，我使用的是淘宝的reset。
01 |
/* |
02 |
KISSY CSS Reset |
03 |
*/ |
04 |
/** 清除内外边距 **/ |
05 |
body, h1, h2, h3, h4, h5, h6, 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 表格元素 */ { |
10 |
margin: 0; |
11 |
padding: 0; |
12 |
} |
13 |
/** 设置默认字体 **/ |
14 |
body, |
15 |
button, input, select, textarea /* for ie */ { |
16 |
font: 12px/1.5 tahoma, arial, 5b8b4f53, sans-serif; |
17 |
} |
18 |
h1, h2, h3, h4, h5, h6 { 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 正常化 */ |
22 |
/** 重置列表元素 **/ |
23 |
ul, ol { list-style: none; } |
24 |
/** 重置文本格式元素 **/ |
25 |
a { text-decoration: none; } |
26 |
a:hover { text-decoration: underline; } |
27 |
sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */ |
28 |
sub { vertical-align: text-bottom; } |
29 |
/** 重置表单元素 **/ |
30 |
legend { color: #000; } /* for ie6 */ |
31 |
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ |
32 |
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ |
33 |
/* 注：optgroup 无法扶正 */ |
34 |
/** 重置表格元素 **/ |
35 |
table { border-collapse: collapse; border-spacing: 0; } |
声明DTD：
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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
1 |
<div class="content"> |
2 |
<div class="subMenuLeft"></div> |
3 |
<div class="mainBoxCenter"> |
4 |
</div> |
5 |
<div class="infoRight"> |
6 |
</div> |
7 |
</div> |
CSS
01 |
div.content{ |
02 |
padding-left:150px; |
03 |
padding-right:200px; |
04 |
} |
05 |
div.subMenuLeft,div.mainBoxCenter,div.infoRight{ |
06 |
display:inline-block; |
07 |
zoom:1; *display:inline;/*fix ie<8*/ |
08 |
} |
09 |
div.mainBoxCenter{ |
10 |
width:100%; |
11 |
} |
12 |
div.subMenuLeft{ |
13 |
width:150px; |
14 |
margin-left:-150px; |
15 |
} |
16 |
div.infoRight{ |
17 |
width:300px; |
18 |
margin-right:-300px; |
19 |
} |
使用float负边距的布局
该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于block。也就是说，浮动对象的display特性将被忽略。
其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。
由此我们知道可以设置三个DIV默认全部向左浮动，然后设置后两个DIV的margin属性让其显示到必要的位置。
1 |
<div class="content"> |
2 |
<div class="mainBoxCenter"> |
3 |
</div> |
4 |
</div> |
5 |
<div class="subMenuLeft"> |
6 |
</div> |
7 |
<div class="infoRight"> |
8 |
</div> |
- 设置div.content的宽度为100%，充满整个窗口，并向左浮动；
- 设置div.mainBoxCenter的左外边距以及右外边距分别等于要显示的两个DIV的宽度；
- 设置div.subMenuLeft向左浮动，并且margin-left:100%;这样subMenuLeft偏移到屏幕的最左方；
- 设置div.infoRight向左浮动，并且margin-left值为自身的宽度，这样infoRight便偏移到屏幕的右侧。
01 |
div.content{ |
02 |
width:100%; |
03 |
float:left; |
04 |
} |
05 |
div.subMenuLeft,div.infoRight{ |
06 |
float:left; |
07 |
} |
08 |
div.subMenuLeft{ |
09 |
width:150px; |
10 |
margin-left:-100%; |
11 |
} |
12 |
div.infoRight{ |
13 |
width:200px; |
14 |
margin-left:-200px; |
15 |
} |
16 |
div.mainBoxCenter{ |
17 |
margin-left:150px; |
18 |
margin-right:200px; |
19 |
} |