div对齐与网页布局详解对齐与网页布局详解
Div布局是学习的重点,这篇文章主要为大家详细介绍了div对齐与网页布局的相关学习资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
div布局之所以要学懂学透,是因为table的布局实在是难堪大用,如果是同处于一个表格之内,各行的规格分布根本就没法调,例如下面的一段非常简单的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table border="1">
<tr>
<td width="5%">11111111111111</td>
<td width="85%">11111111111111</td>
<td width="5%">11111111111111</td>
<td width="5%">11111111111111</td>
</tr>
<tr>
<td width="5%">11111111111111</td>
<td width="5%">11111111111111</td>
<td width="85%">11111111111111</td>
<td width="5%">11111111111111</td>
</tr>
</table>
</body>
</html>
本想写出这样的布局:
但实际上出来的效果却是这样:
这很正常,因为table布局中仅有第一行对于td的设置是起作用的,余下行的td设置都会给第一行的td设置所覆盖。
这个问题很严重,尤其是各位网页设计师,把table的border属性设置成0的情况下,很难想出发生了什么?
解决这样的问题,如果还是用table布局,那你有两种方法,一是让这两行不处于同一个表格,二是使用表格嵌套的方式。
不过这也太蛋疼了吧,每次布局都要用一个新的表格?而且脚本对这么多表格如何编号?如何控制?
所以说table的网页布局不堪大用,只能用于行内的布局,table在行内布局的作用对于div确实强大很多。
但是div布局同样可以完成行内布局,只不过要定义好style中的float属性,并且完成了一次行内布局,要使用style中的clear:both换行。