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>
相关推荐
羊小猪~~6 分钟前
前端入门一之DOM、获取元素、DOM核心、事件高级、操作元素、事件基础、节点操作
前端·javascript·css·vscode·html·浏览器·edge浏览器
T0uken16 分钟前
【前端】Svelte:生命周期函数
前端
陈随易31 分钟前
wangEditor,从开源、停更到重生
前端·后端·程序员
getaxiosluo32 分钟前
vue3使用element-plus,树组件el-tree增加引导线
前端·javascript·vue.js·elementui·css3·element-plus
YUJIANYUE40 分钟前
6KBhtm+js实现提交名单随机抽取功能适用活动或课堂随机点名
前端·javascript·css
寅时码1 小时前
【奇淫技巧】让你的路由跳转拥有TS类型提示,告别人工记路由path
前端·javascript·react.js
可缺不可滥1 小时前
前端 性能优化 (图片与样式篇)
前端·性能优化
Bug从此不上门1 小时前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
拼图2092 小时前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉2 小时前
vue反向代理配置及宝塔配置
前端·javascript·vue.js