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

css实现三列布局

2014-07-06 22:32 127 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航