两列布局，三列布局如何自适应？

最新推荐文章于 2022-09-03 15:58:30 发布

c三只布朗熊

最新推荐文章于 2022-09-03 15:58:30 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/weixin_46347206/article/details/118658883

版权

两栏布局：左侧定宽，右侧自适应方法一：利用绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .

摘要由CSDN通过智能技术生成

两栏布局：左侧定宽，右侧自适应

方法一：利用绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .sitebar{
            width: 200px;
            background-color: green;
        }
        .content{
            position: absolute;
            left: 200px;
            right: 0;
            top: 0;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="content">右侧主体自适应区块</div>
    <div class="sitebar">左侧定宽200px区块</div>
</body>
</html>

方法二：浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

c三只布朗熊

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两列布局，三列布局如何自适应？

两栏布局：左侧定宽，右侧自适应方法一：利用绝对定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .
复制链接

扫一扫