CSS设计一个三列布局的页面

探讨这种布局是因为最近对话框组件以及信息系统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     margin0;
11     padding0;
12 }
13 /** 设置默认字体 **/
14 body,
15 button, input, select, textarea /* for ie */ {
16     font12px/1.5 tahomaarial, \5b8b\4f53sans-serif;
17 }
18 h1, h2, h3, h4, h5, h6 font-size100%; }
19 address, cite, dfn, em, var { font-stylenormal; } /* 将斜体扶正 */
20 code, kbd, pre, samp { font-familycourier new, couriermonospace; } /* 统一等宽字体 */
21 small font-size12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
22 /** 重置列表元素 **/
23 ul, ol { list-stylenone; }
24 /** 重置文本格式元素 **/
25 a { text-decorationnone; }
26 a:hover { text-decorationunderline; }
27 sup { vertical-aligntext-top; } /* 重置,减少对行高的影响 */
28 sub vertical-aligntext-bottom; }
29 /** 重置表单元素 **/
30 legend { color#000; } /* for ie6 */
31 fieldset, img { border0; } /* img 搭车:让链接里的 img 无边框 */
32 button, input, select, textarea { font-size100%; } /* 使得表单元素在 ie 下能继承字体大小 */
33 /* 注:optgroup 无法扶正 */
34 /** 重置表格元素 **/
35 table { border-collapsecollapseborder-spacing0; }

声明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>
  1. 设置div.content的宽度为100%,充满整个窗口,并向左浮动;
  2. 设置div.mainBoxCenter的左外边距以及右外边距分别等于要显示的两个DIV的宽度;
  3. 设置div.subMenuLeft向左浮动,并且margin-left:100%;这样subMenuLeft偏移到屏幕的最左方;
  4. 设置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 }

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。