【Bootstrap】12.2日作业简单flex布局

最新推荐文章于 2024-06-04 21:29:07 发布

MruAn

最新推荐文章于 2024-06-04 21:29:07 发布

阅读量168

点赞数 4

文章标签： html bootstrap

本文链接：https://blog.csdn.net/MruAn/article/details/121663729

版权

<!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>Document</title>
    <style>
        .head{
    height: 50px;
    width: 30%;
    margin: 0 auto;
    background-color: bisque;
}
.flex{
    display: flex;
    flex-direction: row;
    justify-content:center;
}
.body{
    height: 300px;
    width: 30%;
    margin: 0 auto;
    background-color: red;
}
.right{
    width: 30%;
    margin: 0 auto;
}
.left{
    width: 30%;
    margin: 0 auto;
    
}
p{
    background-color: yellow;
}

@media (max-width:580px) {
    .flex{
        display: flex;
        flex-direction:column ;
    }
    .head,.body,.right,.left{
        width: 90%;
    }

    
}

    </style>
</head>
<body>
    <div class="head">
        标题
    </div>
    <div class="flex">
        <div class="left">
            <p>左边新闻1</p>
            <p>左边新闻2</p>
        </div>
        <div class="body">
            身体内容
        </div>
        <div class="right">
            <p>右边新闻1</p>
            <p>右边新闻2</p>
        </div>
    </div>

    
    
</body>
</html>