您的位置:首页 > Web前端 > CSS

CSS三列高度自适应布局

2007-05-22 09:28 399 查看
样式表:




<style type="text/css">...




body {...}{margin: 0;font-size: 12px;font-family: Verdana, Arial;text-align: center;}




div {...}{overflow: hidden;}




#body{...}{width:800px;margin: 0 auto;text-align: left;}




.sub{...}{width:200px;float:left}




#head,#foot{...}{background-color:black;width:800px;}




#middle{...}{width:400px;background-color:red;height:400px}




#left{...}{background-color:silver;height:500px }




#right{...}{background-color:blue;height:300px}


</style>

html:


<body>


<form id="form1" runat="server">


<div id="body">


<div id="head"></div>


<div id="mid">


<div id="left" class="sub">left</div>


<div id="middle" class="sub">middle</div>


<div id="right" class="sub">right</div>


</div>


<div id="foot"></div>


</div>


</form>


</body>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: