css弹性盒子

棉晗榜2024-03-11 9:24

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>

上一篇：【C语言】——详解操作符（下）

下一篇：自然语言处理（NLP）—— 生成式模型和判别式模型