display:table

最新推荐文章于 2024-11-01 00:18:34 发布

Whisper_a

最新推荐文章于 2024-11-01 00:18:34 发布

阅读量409

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Whisper_a/article/details/38338403

本文介绍了一种利用CSS的display属性实现三栏等高的网页布局技巧。通过将父元素设置为display:table，并将其子元素设置为display:table-cell，可以轻松实现各栏目的高度一致，适用于多种网页设计场景。

#main{  
display:table;  
border-collapse:collapse;  
}  
 
#nav{  
display:table-cell;  
width:180px;  
background-color:#e7dbcd;  
}  
 
#extras{  
display:table-cell;  
width:180px;  
padding-left:10px;  
border-right:1pxdotted#d7ad7b;  
}  
 
#content{  
display:table-cell;  
width:380px;  
padding-left:10px;  
}

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns=http://www.w3.org/1999/xhtml
lang="en-US"> 
<head> 
?HTMLheadcontent…  
</head> 
<body> 
<div id="wrapper"> 
<div id="header"></div> 
<div id="main"> 
<span style="white-space:pre">	</span><div id="nav"> 
<span style="white-space:pre">		</span>?navigationcolumncontent…  
<span style="white-space:pre">	</span></div> 
<span style="white-space:pre">	</span><div id="extras"> 
<span style="white-space:pre">		</span>?newsheadlinescolumncontent…  
<span style="white-space:pre">	</span></div> 
<span style="white-space:pre">	</span><div id="content"> 
<span style="white-space:pre">		</span>?mainarticlecontent…  
<span style="white-space:pre">	</span></div> 
</div> 
</div> 
</body>

给main上使用display:table 在nav extras content上使用display:table-cell成功实现三栏等高布局！