【Css】通过flex弹性盒实现头像区的多行、多列效果（图文+完整代码实例）

完整代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商家界面</title>
</head>
<script type="text/javascript" src="vue.js"></script>
<link rel="stylesheet" href="css/body.css">
<style>
    /* #region === 【商家头像区】 === */
    .top {
        background-color: white;
        margin-top: 10px;
    }

    .top_1 {

        height: 70px;
        display: flex;
        flex-direction: row;
        /* background-color: beige; */

    }

    .top_1_left {
        width: 0;
        flex-grow: 25;
        text-align: center;
        /* background-color: aquamarine; */
    }

    .top_1_left img {
        width: 65spx;
        height: 65px;
        margin-top: 2.5px;
    }

    .top_1_right {
        width: 0;
        flex-grow: 75;
        display: flex;
        flex-direction: column;
        /* background-color: blueviolet; */
    }

    .top_1_right_1 {
        height: 0;
        flex-grow: 40;
        font-size: 18px;
        font-weight: bold;
        line-height: 35px;
        /* background-color: yellow; */
    }

    .top_1_right_2 {
        height: 0;
        flex-grow: 30;
        font-size: 12px;
        color:rgb(74, 74, 74);
        line-height: 25px;
        /* background-color: rgb(211, 251, 214); */
    }

    .top_1_right_3 {
        height: 0;
        flex-grow: 30;
        font-size: 12px;
        color:rgb(74, 74, 74);
        /* background-color: rgb(247, 191, 247); */
    }
    /* #endregion */
</style>

<body>
    <div id="box">

        <div class="top">
            <!-- 商家头像区 -->
            <div class="top_1">
                <div class="top_1_left">
                    <img src="images/shop/shop_1_logo.png">
                </div>
                <div class="top_1_right">
                    <div class="top_1_right_1">华莱士·全鸡汉堡（张飞店）</div>
                    <div class="top_1_right_2">邯郸市丛台区天天路335号</div>
                    <div class="top_1_right_3">营业时间：8:00-18:00</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
【Css】通过flex弹性盒实现头像区的多行、多列效果（图文+完整代码实例）

猜你喜欢
