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="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>
<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>
相關文章
- 如何用css實現"等高佈局"。CSS
- CSS佈局 --- 等寬&等高佈局CSS
- css經典佈局系列二——等分等高佈局CSS
- 等高佈局
- DIV+CSS佈局CSS
- css+div佈局案例CSS
- div 實現田字格佈局
- CSS佈局——div居中方法CSS
- div+css佈局注意點CSS
- css如何保持div等高寬比CSS
- 分享div css佈局案例的目的CSS
- 如何實現兩個div等高效果
- 網頁佈局實現之div垂直居中網頁
- CSS層疊樣式表——DIV+CSS佈局CSS
- div css左右佈局例項程式碼CSS
- CSS+DIV佈局三種定位方式CSS
- div佈局
- CSS多種佈局方式自我實現-水平佈局(二)CSS
- css佈局-實現左中右佈局的5種方式CSS
- 常用的多列等高佈局收藏
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- CSS Grid實現聖盃佈局CSS
- div佈局小技巧
- 三種方法實現CSS三欄佈局CSS
- CSS佈局 --- 居中佈局CSS
- css佈局-float佈局CSS
- 12種常見的div+css佈局例項CSS
- css實現高度動態變化的佈局CSS
- 【css】佈局CSS
- css 佈局CSS
- CSS佈局CSS
- 前端學習路線(2)——Git使用、DIV+CSS佈局前端GitCSS
- CSS 佈局之水平居中佈局CSS
- CSS佈局之三欄佈局CSS
- CSS佈局 --- 自適應佈局CSS
- 面試之CSS篇 - 實現三欄佈局的延伸面試CSS
- css佈局,左右固定中間自適應實現CSS
- CSS實際案例,佈局結構CSS