网海天涯

div布局实例
本节将会介绍模板制作过程中较为重要的一个环节：Div布局。与table布局相比，div布局更加简便快捷，也是目前网页制作中常用的布局方法。但要想熟练地使用div进行网页布局，还得在长期的代码书写实践中加以理解，逐步提高div布局的技能。

我们先看下面的一段代码：
<div style="width:860px;height:120px;border:1px solid red">这是个宽860px，高120px，边框为1px 红色实边的div</div> 

大家都看到效果了吧？如果你对上面的代码依旧觉得陌生，请返回这里看看先前的教程，如果你在仔细看过n遍后，仍然觉得无法理解，请在离开本博客之前告诉我一声，你到底是哪儿不明白，也好让我有所改进……

好了，我们再多写几个div的代码：

<div style="width:860px;height:120px;border:1px solid red">这是个宽860px，高120px，边框为1px 红色实边的div</div>
<div style="width:260px;height:220px;border:1px solid red">这是个宽260px，高220px，边框为1px 红色实边的div</div>
<div style="width:590px;height:120px;border:1px solid red">这是个宽590px，高120px，边框为1px 红色实边的div</div>

效果不用我截图也能知道了吧？ （还是截张图吧……）
 

现在就要想办法将下面那两个div排在一起了。常用的办法是设置float属性。float表示漂浮的意思，其值有left,right,none。我们试着在第二个div的style中加入float:left，并且在最后一个div中加入float:right试试看：

<div style="width:860px;height:120px;border:1px solid red">这是个宽860px，高120px，边框为1px 红色实边的div</div>
<div style="width:260px;height:220px;border:1px solid red;float:left">这是个宽260px，高220px，边框为1px 红色实边，浮动靠左的div</div>
<div style="width:590px;height:120px;border:1px solid red;float:right">这是个宽590px，高120px，边框为1px 红色实边，浮动靠右的div</div>
现在是这样的效果了……


上面的效果会因各人机器的分辨率的不同而异，用800X600分辨率的同学们都能看到正常的页面布局……
造成这种差异的原因就在于，这里的浮动是相对于浏览器的边界而定的。我们只要给下面的两个div加上一个“外套”div，就能够正常表现了……
<div style="width:860px;height:120px;border:1px solid red">这是个宽860px，高120px，边框为1px 红色实边的div</div>
<div style="width:860px">
<div style="width:260px;height:220px;border:1px solid red;float:left">这是个宽260px，高220px，边框为1px 红色实边的div</div>
<div style="width:590px;height:120px;border:1px solid red;float:right">这是个宽590px，高120px，边框为1px 红色实边的div</div>
</div>
下面是正常的显示效果：

好了，这节教程的内容有点多，想偷懒的同学可能早就想下课了吧？但是，我有理由相信，还是有不少同学没有理解本节的内容的，所以请这些同学把你们不明白的地方留言给我。另外，下节课还要继续div布局，不懂的同学可要抓紧时间复习一下前面的知识了啊！