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

该博客探讨如何使用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正常会占据一整行。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值