程序设计-HTML基础之两个Div并排显示

这是一个简单的教程。

一、使用display的inline属性

二、通过设置float来让Div并排显示

三、position:absolute

对于两个div并排,左边为绝对宽度,右边为相对宽度的,需要用到这种布局的情况比较多见,如左边为导航,右边为内容的页面

1、将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后right的一块width为百分百

2、 使用position:absolute。代码如下。

这段代码主要涉及到以下两点点比较重要的:

(1)兼容firefox实现div高度100%;

(2)div绝对定位的妙用;在页面布局的时候,position:absolute如果灵活的应用,可以达到很好的效果。

3、 使用float解决div左右布局,左为绝对宽度,右为相对宽度问题

4、代码如下。方法3可能没有按照题目要求,但是可以达到一样的页面效果。主要是使用了div的float属性。

 

俊霖

发表评论

您必须