用CSS、HTML编写一个两列布局的网页，右侧宽度为200px，左侧自动扩展。

暗里着迷818

于 2015-09-16 23:36:42 发布

阅读量607

点赞数

<!DOCTYPE html>  
<html>  
        <head>  
                <style type="text/css">  
                        #left  
                        {  
                                height:100px;  
                                margin-right:200px;  
                                background-color:green;  
                        }  
                        #right  
                        {  
                                height:100px;  
                                width:200px;  
                                float:right;  
                                background-color:red;  
                        }  
                </style>  
        </head>  
        <body>  
              <!-#right必须在#left之上-->  
                <div id="right"></div>  
                <div id="left"></div>  
        </body>  
</html>

#right在#left之下时,由结果看来，设置float和position:absolute的元素会脱离文档流，其他周围元素会忽视它，而移动自身位置。故浮动或绝对定位的元素只影响位于其后的元素，其前的元素会不受影响。另外，浮动框的移动是基于原始位置左右移动，而不会上下移动，直到遇到另一浮动框的边缘或者包含框。而div正常会占据一整行。

转载： http://blog.csdn.net/bluetears1988/article/details/12435201