css弹性盒子

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .container1
        {
            display:flex;
            flex-direction:row;
        }
        .item_sta
        {
            border-radius: 10px;
            border: 1px solid #787878;
            padding:20px;
            flex :1;
            margin:10px;
        }
    </style>
</head>
<body>
    <div class="container1">
        <div class="item_sta">
            <div>作业公示</div>
            <div style="font-weight:bold;font-size:20px;">134</div>
        </div>
        <div class="item_sta">
            <div>申请/实际完成</div>
            <div style="font-weight:bold;font-size:20px;">78/62</div>
        </div>
    </div>
    <div class="container1">
        <div class="item_sta">
            <div>硫磺出库总量(吨)</div>
            <div style="font-weight:bold;font-size:20px;">53456</div>
        </div>
        <div class="item_sta">
            <div>硫磺入库总量(吨)</div>
            <div style="font-weight:bold;font-size:20px;">74689</div>
        </div>
    </div>
</body>
</html>
相关推荐
道友可好5 小时前
Superpowers vs OpenSpec vs Spec Kit:该选哪个?
前端·人工智能·后端
এ慕ོ冬℘゜5 小时前
【双月日期范围选择器】博客(可直接交作业 / 上线)
前端·javascript·交互·jquery
问心无愧05135 小时前
ctf show web入门102
android·java·前端·笔记
前端尤雨西5 小时前
package.json 中版本号遵循什么原则
前端
用户81423861188416 小时前
CSS或JS实现逐帧动画方案
前端
光影少年6 小时前
react性能优化
前端·react.js·掘金·金石计划
深蓝电商API6 小时前
逆向工程入门:从Chrome DevTools到JS混淆还原
前端·javascript·chrome·爬虫·chrome devtools
石山岭6 小时前
# iOS 题库
前端
Zella折耳根6 小时前
从零解析终端小游戏开发:功能实现与核心编程知识点复盘
前端
Pikachu8036 小时前
我在早高峰地铁里对手机吼了几句,隔壁同事直接看傻了
前端·后端