浮动元素，切图布局

最新推荐文章于 2020-07-30 10:44:41 发布

混迹在开发队伍里的伪开发

最新推荐文章于 2020-07-30 10:44:41 发布

阅读量142

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42645716/article/details/89214883

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<style>
    *{ margin: 0;padding: 0;}
    .content{width: 1320px;height: auto;margin: 20px auto;}
    .fl{float: left;width: 276px;height: 460px;background: #abcdef;}
    .fr{float: right;}
    .fr ul{width: 1044px;height: 460px;display: flex;flex-wrap: wrap;justify-content: space-between;}
    .fr ul li{float: left;border: 1px solid #ccc;list-style: none;}
    .fr ul .con1{width: 270px;height: 230px;}
    .fr ul .con2{width: 490px;height: 230px;}
</style>
<body>
    <div class="content">
        <div class="fl"></div>
        <div class="fr">
            <ul>
                <li class="con1">1</li>
                <li class="con1">2</li>
                <li class="con2">3</li>
                <li class="con2">4</li>
                <li class="con1">5</li>
                <li class="con1">6</li>
            </ul>
        </div>        
    </div>    
</body>
</html>

混迹在开发队伍里的伪开发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动元素，切图布局

效果：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> &l...
复制链接

扫一扫