css实现等分布局

最新推荐文章于 2023-08-10 15:11:04 发布

chengxue_123

最新推荐文章于 2023-08-10 15:11:04 发布

阅读量632

点赞数

分类专栏： css布局文章标签：前端 css

本文链接：https://blog.csdn.net/chengxue_123/article/details/109645784

版权

在前端开发中，CSS常用于构建等分布局，通过百分比布局或利用Flexbox进行灵活分配。例如，使用Flexbox时，可以设置flex属性为1、2、3等来按比例分配元素宽度，实现不同比例的等宽布局。

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

css画页面的时候，喜欢使用百分比实现等分布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        ul {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        
        ul li {
            width: 33.3%;
            height: 200px;
            list-style: none;
            float: left;
            padding: 0 10px;
        }
        
        ul li div {
            width: 100%;
            height: 200px;
            background-color: blue;
        }

最低0.47元/天解锁文章

chengxue_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现等分布局

css画页面的时候，喜欢使用百分比实现等分布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl.
复制链接

扫一扫

专栏目录