网页左中右布局

来源:互联网 发布:隆逸优化作品 编辑:程序博客网 时间:2024/06/01 09:56

如题。

        网页的左中右布局。实现类似于截图中的效果:

              

       我使用三个div块级元素来实现这个布局。

       外层使用一个大的div将其包住,高宽都限制。就把它们命名为div-left, div-middle,div-right吧。

       其中,div-left的width:47%;div-middle的width:6%;div-right的width:47%;

       然后,三个块级元素全部float:left;这样子就可以实现页面的基本布局。然后在div-right中使用块级元素使用float:right。文字text-align:right;然后,在div-right中使用块级元素float:left;text-align:left;

       这样实现的效果就是两边的div向中间靠拢。

       结构实现之后记得在大的div里面清除一下浮动。

      结束。

0 0
原创粉丝点击