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

CSS实现三列DIV等高布局

2014-09-18 14:47 561 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS等高布局</title>

<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:#00FFFF;

 }

#center{

 float:left;

 width:500px;

 background:#FF0000;

 }

#right{

 float:right;

 width:250px;

 background:#00FF00;

 }

</style>

</head>

<body>

<div id="wrap">

 <div id="left">

  <p>left</p>

  <p>left</p>

  <p>left</p>

  <p>left</p>

  <p>left</p>

 </div>

 <div id="center">

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

  <p>center</p>

 </div>

 <div id="right">

  <p>right</p>

  <p>right</p>

  <p>right</p>

 </div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航