<!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>Special Layout</title> | |
<style type="text/css"> | |
html, body { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
} | |
#wrapper { | |
position: relative; | |
top: 10%; | |
margin: 0 auto; | |
width: 80%; | |
min-width: 400px; | |
height: 80%; | |
background: #000; | |
} | |
#left { | |
float: left; | |
position: relative; | |
width: 200px; | |
height: 100%; | |
margin-right: -200px; | |
background: blue; | |
overflow: hidden; | |
} | |
#right { | |
position: relative; | |
width: auto; | |
height: 100%; | |
background: green; | |
margin-left: 200px; | |
overflow: hidden; | |
} | |
#lefttop { | |
width: 100%; | |
height: 100px; | |
background: red; | |
} | |
#leftbottom { | |
width: 100%; | |
background: #0ff; | |
height: auto !important; | |
height: 9999px; | |
} | |
#left>#leftbottom { | |
position: absolute; | |
top: 100px; | |
bottom: 0; | |
} | |
#righttop { | |
width: 100%; | |
height: 100px; | |
background: #f0f; | |
} | |
#rightbottom { | |
width: 100%; | |
background: #ff0; | |
height: auto !important; | |
height: 9999px; | |
} | |
#right>#rightbottom { | |
position: absolute;; | |
top: 100px; | |
bottom: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="wrapper"> | |
<div id="left"> | |
<div id="lefttop">lefttop</div> | |
<div id="leftbottom">leftbottom</div> | |
</div> | |
<div id="right"> | |
<div id="righttop">righttop</div> | |
<div id="rightbottom">rightbottom</div> | |
</div> | |
</div> | |
</body> | |
</html> |
div页面居中(上下左右)
最新推荐文章于 2023-10-30 20:10:04 发布