1、1. 要实现页面两列布局

2、2.看如下代码:

3、3.在浏览器中预览的效果如下

4、4.两个div并没有像我们想象的并列在一行
这是因为div是块级元素,默认占据整行
现在给左边的div加上一个float:left

5、5.预览效果:

6、6.这是因为 div浮动之后 脱离了文档流,下一个块级元素上移,直到遇到上一个元素。
为了兼容各个浏览器,给right加上一个float:right
让右侧的div靠右浮动

7、7.最终效果

时间:2026-02-12 03:38:01
1、1. 要实现页面两列布局

2、2.看如下代码:

3、3.在浏览器中预览的效果如下

4、4.两个div并没有像我们想象的并列在一行
这是因为div是块级元素,默认占据整行
现在给左边的div加上一个float:left

5、5.预览效果:

6、6.这是因为 div浮动之后 脱离了文档流,下一个块级元素上移,直到遇到上一个元素。
为了兼容各个浏览器,给right加上一个float:right
让右侧的div靠右浮动

7、7.最终效果
