CSS：网页混合布局，浮动，绝对定位，相对定位

最新推荐文章于 2023-03-22 22:28:15 发布

波西塔塔Y

最新推荐文章于 2023-03-22 22:28:15 发布

阅读量586

点赞数

分类专栏：网页设计文章标签： web 布局

本文链接：https://blog.csdn.net/u012881559/article/details/74999425

版权

网页设计专栏收录该内容

10 篇文章 0 订阅

订阅专栏

float
position: relative
position: absolute;left: 130px;top: 0;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>练习布局</title>
    <style type="text/css">
        div{margin: 0 auto;}
        .top{width:600px;height: 100px;background-color:aquamarine ;}
        .main{width: 600px;height: 500px;background-color: red;position: relative;}
        .left{width: 20%;height: 500px;background-color: navy;float: left;}
        .right{height:500px;background-color: greenyellow;position: absolute;left: 130px;top: 0;}
        .foot{width:600px;height:100px;background-color: brown;}
    </style>
    </head>
    <body>
        <div class="top">top</div>
        <div class="main">
            <div class="left">left</div>
            <div class="right">right
            引入缓冲技术的最主要目的是为了解决 CPU 与外设之间的速度不匹配问题，这样的说法正确吗？
            </div>
        </div>
        <div class="foot">foot</div>
    </body>
</html>