CSS div 自适应布局

最新推荐文章于 2024-04-03 10:25:19 发布

卋舉

最新推荐文章于 2024-04-03 10:25:19 发布

阅读量264

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120737912

版权

CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>div 自适应布局</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <style>
        .con .left {
            /*固定布局*/
            width: 200px;
            background-color: aqua;
            float: left;
        }

        .con .right {
            /*自适应布局*/
            background-color: green;
        }

        .ad .right {
            /*固定布局*/
            width: 450px;
            float: right;
            background-color: aqua;
        }

        .ad .left {
            /*自适应布局*/
            margin-right: 450px;
            background-color: green;
        }

        .container .left {
            /*固定布局*/
            width: 280px;
            background-color: aqua;
            float: left;
            height: 200px;
        }

        .container .right {
            /*固定布局*/
            width: 350px;
            background-color: green;
            float: right;
            height: 200px;
        }

        .container .center {
            /*自适应布局*/
            background-color: lightgreen;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="con">
    <div class="left">left固定</div>
    <div class="right">right自适应</div>
</div>
<hr>
<div class="ad">
    <div class="right">right固定</div>
    <div class="left">left自适应</div>
</div>
<hr>
<div class="container">
    <div class="left">left固定280px</div>
    <div class="right">right固定350px</div>
    <div class="center">center自适应</div>
</div>
</body>
</html>

卋舉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS div 自适应布局

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>div 自适应布局</title> <meta name="Keywords" content="关键字"&
复制链接

扫一扫