纯CSS实现三列DIV等高布局

  作者:会飞的

<!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=&q

<!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>


有用  |  无用

猜你喜欢