当前位置：首页 → 问答吧 → 大家看下这样的效果该如何布局？

大家看下这样的效果该如何布局？

时间：2011-06-19

来源：互联网

如图，960px的页宽，想要在Main左侧加一个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=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style></head> <body> <div class="header">header</div> <div class="main">Main</div> </body> </html>
提示：您可以先修改部分代码再运行

第二种情况：

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style></head> <body> <div class="wrap"> <div class="header">header</div> <div class="main">Main</div> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 aisiyu 于 2011-6-19 18:52 编辑 ]

附件

未命名-1.gif (3.11 KB)

2011-6-19 18:50

效果图

作者: aisiyu 发布时间: 2011-06-19

<!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=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style></head> <body> <div class="header">header</div> <div class="main"> <div id="bk"></div> Main</div> </body> </html>
提示：您可以先修改部分代码再运行

作者: bluekee 发布时间: 2011-06-19

不知道，我理解对LZ的意思了没有。。

作者: bluekee 发布时间: 2011-06-19

橙色position:relative;
黑色position:absolute;然后left:-{黑色width}px;top:0;

作者: sivan 发布时间: 2011-06-19