实现双飞翼布局的几种方式

最新推荐文章于 2023-05-17 17:19:37 发布

冰若雨

最新推荐文章于 2023-05-17 17:19:37 发布

阅读量270

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43434736/article/details/118903864

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

flex布局实现双飞翼

<!DOCTYPE html>
<html>
<head>
    <title>css布局有几种方式呢</title>
    <style type="text/css">
        .content {
            display: flex;
            height: 100%;
        }
        .left, .right {
            background: red;
            width: 200px;
            height: 500px;
        }
        .center {
            flex: 1;
            background: blue;
            width: auto;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- flex实现双飞翼 -->
        <!-- <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div> -->
    </div>
</body>
</html>

float布局实现双飞翼

<!DOCTYPE html>
<html>
<head>
    <title>css布局有几种方式呢</title>
    <style type="text/css">
        .content {
            height: 100%;
        }
        .left {
            background: red;
            width: 200px;
            height: 500px;
            float: left;
        }
        .right {
            background: red;
            width: 200px;
            height: 500px;
            float: right;
        }
        .center {
            background: blue;
            width: auto;
            height: 500px;
            margin: 0 200px;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- float实现双飞翼 -->
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
</body>
</html>

冰若雨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现双飞翼布局的几种方式

flex布局实现双飞翼<!DOCTYPE html><html><head> <title>css布局有几种方式呢</title> <style type="text/css"> .content { display: flex; height: 100%; } .left, .right {
复制链接

扫一扫

专栏目录