两列布局，三列布局

最新推荐文章于 2023-10-21 13:20:24 发布

借我一秋风

最新推荐文章于 2023-10-21 13:20:24 发布

阅读量208

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_53489791/article/details/119426645

版权

两列布局，三列布局

1. 用css、html编写一个两列布局的网页，右侧宽度为200px，左侧自动扩展。

<style>
        .container {
            height: 200px;
            border: 1px solid #000;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 200px;
        }
        
        .right {
            overflow: hidden;
            background-color: skyblue;
            height: 200px;
        }
    </style>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

效果图：
在这里插入图片描述

3. 用css、html编写一个三列布局的网页，左右两侧宽度为200px，中间自动扩展。

style>
        .container {
            height: 200px;
            border: 1px solid #000;
        }
        
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        
        .main {
            overflow: auto;
            height: 200px;
            background-color: slateblue;
        }
        
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background-color: steelblue;
        }

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>

效果图：
在这里插入图片描述

借我一秋风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫