[Web]完全 Div 实现 页面居中、多行多列等 排版实例

原创 2007年09月28日 11:35:00

 

div.htm
=========================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0037)http://localhost:1287/wf/test/div.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>完全 Div 实现 页面居中、多行多列 排版实例</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV 
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: auto; BORDER-LEFT: #000000 1px solid; WIDTH: 800px; MARGIN-RIGHT: auto; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 50px; BACKGROUND-COLOR: yellow; TEXT-ALIGN: left; WORD-WRAP: break-word">横幅广告 
</DIV>
<DIV 
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: auto; BORDER-LEFT: #000000 1px solid; WIDTH: 800px; MARGIN-RIGHT: auto; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 20px; BACKGROUND-COLOR: darkgreen; TEXT-ALIGN: left; WORD-WRAP: break-word">菜单条 
</DIV>
<DIV 
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: auto; BORDER-LEFT: #000000 1px solid; WIDTH: 800px; MARGIN-RIGHT: auto; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: dimgray; TEXT-ALIGN: left; WORD-WRAP: break-word">
<DIV 
style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; BORDER-LEFT: #000 1px solid; WIDTH: 200px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 300px; BACKGROUND-COLOR: #eee; TEXT-ALIGN: left; WORD-WRAP: break-word">我是左边的 
</DIV>
<DIV 
style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; BORDER-LEFT: #000 1px solid; WIDTH: 595px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 400px; BACKGROUND-COLOR: maroon; TEXT-ALIGN: left; WORD-WRAP: break-word">我是右边的 
<BR>
<DIV style="BACKGROUND-COLOR: skyblue">
<DIV 
style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; BORDER-LEFT: #000 1px solid; WIDTH: 200px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 100px; BACKGROUND-COLOR: khaki; TEXT-ALIGN: left; WORD-WRAP: break-word">第一行,第一列 
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff看:) 
我不会挤到第二列去哟,我会自己换行的,呵呵! *^_^*,真臭美 ~^_^#..................
</DIV>
<DIV 
style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; BORDER-LEFT: #000 1px solid; WIDTH: 200px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 100px; BACKGROUND-COLOR: bisque; TEXT-ALIGN: left; WORD-WRAP: break-word">第一行,第二列 
</DIV>
<DIV 
style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; BORDER-LEFT: #000 1px solid; WIDTH: 185px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 50px; BACKGROUND-COLOR: gainsboro; TEXT-ALIGN: left; WORD-WRAP: break-word">第一行,第三列 
</DIV>
<DIV style="CLEAR: both">我不显示东东,但有我很重要,我的作用是清除第一行的 float 属性,这样第一行的包含div就不会变形 
</DIV></DIV><BR>
<DIV style="BACKGROUND-COLOR: yellowgreen">
<DIV 
style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; BORDER-LEFT: #000 1px solid; WIDTH: 200px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 100px; BACKGROUND-COLOR: khaki; TEXT-ALIGN: left; WORD-WRAP: break-word">第二行,第一列 
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
</DIV>
<DIV 
style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; BORDER-LEFT: #000 1px solid; WIDTH: 200px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 100px; BACKGROUND-COLOR: bisque; TEXT-ALIGN: left; WORD-WRAP: break-word">第二行,第二列 
</DIV>
<DIV 
style="BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; FLOAT: left; BORDER-LEFT: #000 1px solid; WIDTH: 185px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 100px; BACKGROUND-COLOR: gainsboro; TEXT-ALIGN: left; WORD-WRAP: break-word">第二行,第三列 
</DIV>
<DIV style="CLEAR: both">我不显示东东,但有我很重要,我的作用是清除第二行的 float 属性,这样第二行的包含div就不会变形 
</DIV></DIV></DIV></DIV>
<DIV 
style="BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: auto; BORDER-LEFT: #000000 1px solid; WIDTH: 800px; MARGIN-RIGHT: auto; BORDER-BOTTOM: #000000 1px solid; HEIGHT: 50px; BACKGROUND-COLOR: darkgreen; TEXT-ALIGN: center; WORD-WRAP: break-word">版权所有:<
href="mailto:qghboy@163.com">qghboy@163.com</A> </DIV></BODY></HTML>

显示结果:
===================================



说明几点:
1。MARGIN-LEFT: auto; MARGIN-RIGHT: auto;   可以实现 DIV 居中

2。WORD-WRAP: break-word ; 可以实现DIV 内的文字当一行显示不下的时候会自动换行,从而不会使布局向右延伸

3。FLOAT: left;  这一属性是实行同列排列的关键所在,他是意思就是自动靠左,允许右侧出现图层或文字等。

4。<DIV style="CLEAR: both"></DIV>
       这一步很重要,虽然你可以不写另何东西到里面,但他的作用是清除 float 属性,这样的话就可以使包含 div 图层的图层  实现张开,从而不会使第二行挤到第一行,而是自成一行。

5。TEXT-ALIGN: left;  实现 Div 中的东西向左靠齐。这个不用多说

以上 五 点 切记 切记 切记 这是关键中的关键

Web开发教程--如何让图片在div中垂直居中

方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用v...
  • wanglixin1999
  • wanglixin1999
  • 2015年06月19日 18:31
  • 2058

实现div的上下左右都居中

把 绿色那个div 上下页居中 把 绿色那个div 上下页居中
  • LiThinkingBoy
  • LiThinkingBoy
  • 2014年08月14日 15:17
  • 2735

css实现文本和div居中对齐详细讲解示例

 http://www.jb51.net/css/162086.html 1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象。html代码如下: ...
  • yuanyuan_186
  • yuanyuan_186
  • 2016年04月19日 17:19
  • 560

如何让DIV水平和垂直居中三种方法

方法1 CSS实现水平和垂直居中要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50...
  • summer7310
  • summer7310
  • 2015年09月27日 20:14
  • 2079

Div+Css控制网页排版小记.

新的学期,空闲时间比较多,借着刚买的玩具云服务器,准备搭建一个个人主页玩一玩。所以顺便学习下html的知识。        结果呢,学着html发现就要连着css,javascript,jquery...
  • qq_24894159
  • qq_24894159
  • 2016年10月16日 23:26
  • 612

实现div水平、垂直居中的几种方法

1、最常用的,也是最简单的(利用position定位、再用margin偏移) 实现div水平垂直居中 body{ background: #272822; } .te...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016年12月28日 15:10
  • 1234

div水平居中与垂直居中

CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.可是事实...
  • xiaoouh
  • xiaoouh
  • 2016年02月16日 17:42
  • 3474

如何在一个div中使其子div居中

今天要讲的主要内容如题,**即如何在一个div中使其子div居中**。我在网上其他地方也看到过对其的不同实现方式,几天主要做一个详细的汇总,希望对大家有帮助。...
  • u012088576
  • u012088576
  • 2017年03月30日 10:07
  • 4588

Web设计师必备的10款最佳排版工具

随着电子设备的日益更新,网络几乎占据了我们日常生活最重要的一部分。在芸芸众生的各大网站 中,如何才能让你的网站别具一格呢?   亮丽的色彩、优美的设计、实用的功能这些都是网站必备的特性。俗话说:...
  • owen5630
  • owen5630
  • 2014年01月03日 17:12
  • 1178

DIV居中之完全指引

每一个新手难免感到居中一个DIV不是如你所期望的容易。居中DIV里面的内容很容易,可以通过设置text-align属性为center, 但是事情往往会变得少许棘手. 当你去垂直居中一个DIV,你会感觉...
  • dc8899
  • dc8899
  • 2014年02月13日 16:54
  • 774
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[Web]完全 Div 实现 页面居中、多行多列等 排版实例
举报原因:
原因补充:

(最多只允许输入30个字)