CSS如何实现带有标题栏的并排两栏的div

最新推荐文章于 2023-05-17 11:43:52 发布

wmx1786140

最新推荐文章于 2023-05-17 11:43:52 发布

阅读量433

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/wmx1786140/article/details/127169373

版权

要点：1.设置弹性盒模型

2.text-align：center 设置元素中的文本对齐方式

3.line-height=height 设置元素中文本的行高

效果图如下

下面相应的是html代码

<div class="main">
    <div class="left">
        <div class="left_header_title"><span>title</span></div>
        <div class="left_header_body"></div>
    </div>
    <div class="right">
        <div class="right_header_title"></div>
        <div class="right_header_body"></div>
    </div>
</div>

下面相应的是css代码

.main{
    display: flex;
    margin-left: 50px;
    margin-right: 300px;
}
.left{
    height: 300px;
    width: 500px;
    background-color: white;
    display: flex;
    border:solid 1px rgb(136, 152, 182);
}
.left_header_title{
    height: 30px;
    width: 50px;
    background-color: rgb(68, 151, 156);
    line-height: 30px;
    text-align: center;
    
}
.left_header_body{
    height: 30px;
    flex-grow: 1;
    background-color: rgb(143, 141, 139);
   
}

.right{
    height: 300px;
    flex-grow: 1;
    background-color: white;
    display: flex;
    margin-left: 20px;
    border: solid 1px  rgb(136, 152, 182);
}
.right_header_title{
    height: 30px;
    width: 50px;
    background-color: rgb(68, 151, 156);
    
}
.right_header_body{
    height: 30px;
    flex-grow: 1;
    background-color: rgb(143, 141, 139);
}