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

原创于 2013-10-08 15:23:27 发布 · 8.8k 阅读

2 ·

CC 4.0 BY-SA版权

web前端笔试题专栏收录该内容

5 篇文章

订阅专栏

该博客探讨如何使用CSS和HTML构建一个两列布局的网页，其中右侧列固定宽度为200px，而左侧列则会根据内容自动扩展。文章通过实例展示了浮动和绝对定位在布局中的应用，说明了这些方法如何影响文档流和周围元素的排列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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正常会占据一整行。