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

两列定宽中间自适应的结构布局
服务器君一共花费了250.934 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

探讨这种布局是因为最近对话框组件以及信息系统B/S界面布局的需要。无论是什么,我们在写CSS之前首先引入reset.css,我使用的是淘宝的reset。

/*
KISSY CSS Reset
*/
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
    margin: 0;
    padding: 0;
}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
    font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; } /* 重置,减少对行高的影响 */
sub { vertical-align: text-bottom; }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注:optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

声明DTD:

<!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-;

div{display:inline-block;zoom:1;*display:inline;}

HTML

<div class="content">
<div class="subMenuLeft"></div>
<div class="mainBoxCenter">
</div>
<div class="infoRight">
</div>
</div>

CSS

div.content{
    padding-left:150px;
    padding-right:200px;
}
div.subMenuLeft,div.mainBoxCenter,div.infoRight{
   display:inline-block;
   zoom:1; *display:inline;/*fix ie<8*/
}
div.mainBoxCenter{
   width:100%;
}
div.subMenuLeft{
  width:150px;
  margin-left:-150px;
}
div.infoRight{
 width:300px;
 margin-right:-300px;
}

使用float负边距的布局

该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。

其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后,它将不再独自占据一行。可以浮动到左侧或右侧。

由此我们知道可以设置三个DIV默认全部向左浮动,然后设置后两个DIV的margin属性让其显示到必要的位置。

<div class="content">
    <div class="mainBoxCenter">
    </div>
</div>
<div class="subMenuLeft">
</div>
<div class="infoRight">
</div>
  1. 设置div.content的宽度为100%,充满整个窗口,并向左浮动;
  2. 设置div.mainBoxCenter的左外边距以及右外边距分别等于要显示的两个DIV的宽度;
  3. 设置div.subMenuLeft向左浮动,并且margin-left:100%;这样subMenuLeft偏移到屏幕的最左方;
  4. 设置div.infoRight向左浮动,并且margin-left值为自身的宽度,这样infoRight便偏移到屏幕的右侧。
div.content{
width:100%;
float:left;
}
div.subMenuLeft,div.infoRight{
float:left;
}
div.subMenuLeft{
width:150px;
margin-left:-100%;
}
div.infoRight{
width:200px;
margin-left:-200px;
}
div.mainBoxCenter{
margin-left:150px;
margin-right:200px;
}

本文地址:http://www.nowamagic.net/librarys/veda/detail/210,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/210

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《设计模式:可复用面向对象软件的基础》 Erich Gamma (作者), Richard Helm (作者), Ralph Johnson (作者), John Vlissides (作者), 李英军 (译者), 等 (译者)

《设计模式:可复用面向对象软件的基础》是引导读者走出软件设计迷宫的指路明灯,凝聚了软件开发界几十年设计经验的结晶。四位顶尖的面向对象领域专家精心选取了最具价值的设计实践,加以分类整理和命名,并用简洁而易于重用的形式表达出来。本书已经成为面向对象技术人员的圣经和词典,书中定义的23个模式逐渐成为开发界技术交流所必备的基础知识和语汇。

更多计算机宝库...