CSS网页制造实例:三列等高DIV的网页规划
日期：2013-11-18 浏览次数：21351 次
网页制造aiyiweb文章简介：用纯CSS实现三列DIV等高规划的方法。
散列等高
<body>
<div id="wrap">
<div id="left">
<p style="height:500px">style="height:500px"</p>
</div>
<div id="center">
<p style="height:600px">style="height:600px"</p>
</div>
<div id="right">
<p style="height:700px">style="height:700px"</p>
</div>
</div>
</body>
<div id="wrap">
<div id="left">
<p style="height:500px">style="height:500px"</p>
</div>
<div id="center">
<p style="height:600px">style="height:600px"</p>
</div>
<div id="right">
<p style="height:700px">style="height:700px"</p>
</div>
</div>
</body>
CSS
<style type="text/css">
* {
margin:0;
padding:0;
}
#wrap {
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left, #center, #right {
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left {
float:left;
width:250px;
background:#777;
}
#center {
float:left;
width:500px;
background:#888;
}
#right {
float:right;
width:250px;
background:#999;
}
p {color:#FFF;text-align:center}
</style>
* {
margin:0;
padding:0;
}
#wrap {
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left, #center, #right {
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left {
float:left;
width:250px;
background:#777;
}
#center {
float:left;
width:500px;
background:#888;
}
#right {
float:right;
width:250px;
background:#999;
}
p {color:#FFF;text-align:center}
</style>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
