要點：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); }

總結(jié)

以上是生活随笔為你收集整理的CSS如何实现带有标题栏的并排两栏的div的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。