<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>個人簡介</title>
<style>
*{
margin:0;
padding:0;
}
#a{
width:100%;
height:620px;
box-sizing: border-box;
border:solid #FFEC8B 10px;
}
#b{
width:1323px;
height:580px;
margin-top: 10px;
margin-left: 10px;
box-sizing: border-box;
border:solid #FF7F24 10px;
}
#c{
width:1283px;
height:540px;
margin-top: 10px;
margin-left: 10px;
box-sizing: border-box;
border:solid rgb(0, 162, 232) 10px;
}
#d{
width:1243px;
height:500px;
margin-top: 10px;
margin-left: 10px;
box-sizing: border-box;
border:solid rgb(63, 72, 204) 10px;
}
#e{
width:1203px;
height:460px;
margin-top: 10px;
margin-left: 10px;
box-sizing: border-box;
border:solid rgb(163, 73, 164) 10px;
}
#f{
width:1163px;
height:420px;
margin-top: 10px;
margin-left: 10px;
box-sizing: border-box;
border:solid red 10px;
}
#g{
width:1123px;
height:380px;
margin-top: 10px;
margin-left: 10px;
box-sizing: border-box;
border:solid red 10px;
font-size:0;
}
.middle{
font-size:12px;
display:inline-block;
width:367px;
height:360px;
background-color:black;
}
.left{
font-size:12px;
display:inline-block;
width:367px;
height:360px;
background-color:green;
}
.right{
font-size:12px;
display:inline-block;
width:367px;
height:360px;
background-color:green;
}
.left div{
width:100%;
height:25%;
background-color:yellow;
}
</style>
<body>
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<div id="e">
<div id="f">
<div id="g">
<div class="left">
<div>經濟</div>
<div></div>
<div></div>
<div></div>
</div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
賊奇怪的一個問題，在class為left的div下的div中不寫文字則布局正常，寫了文字布局就亂了，給left div加屬性 overflow:hidden 布局才正常。
uj5u.com熱心網友回復：
.left 設定的是 display:inline-block;inline-block也屬于行內元素。
是行內元素就要遵循vertical-align的垂直對齊方式。
vertical-align 的默認值是baseline： 把當前盒的基線與父級盒的基線對齊。如果該盒沒有基線，就將底部外邊距的邊界和父級的基線對齊
div中不寫文字則沒有基線，就將底部外邊距的邊界和父級的基線對齊
如果寫了文字就有了基線，就會是盒內文字的基線與父級盒的基線對齊
你把.left 設定為 vertical-align: top; 讓當前盒的頂部與父級盒的頂部對齊就可以了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/127864.html
標籤：HTML(CSS)