Question

DIv+Css的图片定位问题!

我现在急想知道一点div+css里面图片排版的问题！
以下是我在随便找的一个图片，用ps切图导出的，经过研究，我用绝对定位把图重新组合起来了，不过很明显，虽然简单，但绝对定位不是最好的方法。。。
真心希望有高手能指导一下，谢谢了！
压缩包里是8张图片和一个images.html的网页文件，我自己的div的树型结构是这样的

┡Container (页面层容器,所有div都放里面，是为了方便整个页面居中用，用绝对定位以后怎么样都居中不了)
┡Header (给头部分一个类，下面的div是头部里面的四个小块)
┡Header_Left (头部div的左边)
┡Header_Right(头部div的右边)
┡Header_Right_1 （顶部右边分的三个小块）
┡Header_Right_2
┡Header_Right_3
┡Main (给中间分一个类，下面的div是中间部份的3个小块）
┡Main_1
┡Main_2
┡Main_3
┡Footer (最后一个是页脚)

在dw里是这样的

<div id="Container"><!--页面层容器-->

<div id="Header"><!--头部-->
<div id="Header_Left"><!--头部左边--></div>
<div id="Header_Right"><!--头部右边-->
<div id="Header_Right_1"><!--头部右顶部--></div>
<div id="Header_Right_2"><!--头部下左边--></div>
<div id="Header_Right_3"><!--头部下右边--></div>
</div>
</div>

<div id="Main"><!--主体-->
<div id="Main_1"><!--主机顶部--></div>
<div id="Main_2"><!--主机左边--></div>
<div id="Main_3"><!--主机右边--></div>
</div>

<div id="Footer"><!--页脚--></div>
</div>

css里面的绝对定位是这样的

#Containet{width:100%; margin: 0 auto;} /*页面层容器*/
#Header{} /*头部*/
#Header_Left{position:absolute; top:0px; left:0px; background-image:url(images/1.gif); width:249px; height:167px;} /*头部左边*/
#Header_Right{}/*头部右边*/
#Header_Right_1{position:absolute; top:0px; left:249px; background-image:url(images/2.gif); width:551px; height:55px;} /*头部右顶部*/
#Header_Right_2{position:absolute; top:55px; left:249px; background-image: url(images/3.gif);width:348px; height:112px;} /*头部下左边*/
#Header_Right_3 {position:absolute; top:55px; left:597px; background-image: url(images/4.gif);width:203px; height:112px;}/*头部下右边*/
#Main{} /*主体*/
#Main_1{position:absolute; top:167px; left:1px; background-image: url(images/5.gif);width:800px; height:53px;} /*主机顶部*/
#Main_2{position:absolute; top:220px; left:2px; background-image: url(images/6.gif);width:183px; height:313px;} /*主机左边*/
#Main_3{position:absolute; top:220px; left:184px; background-image: url(images/7.gif);width:617px; height:313px;} /*主机右边*/
#Footer{position:absolute; top:533px; left:2px; background-image: url(images/8.gif);width:799px; height:67px;} /*页脚*/

文件地址:
http://pickup.mofile.com/5704388591324206
提取码:5704388591324206
我想有没有不用css的绝对定位把图片重新组合起来?谢谢了
不是还有一种float吗？好象看过有人用这个定位的，有没有办法说一两个我试下?

Answer 1

天啊，你用太多绝对定位啦～这样做和表格还有什么区别啊。这样不会使运行速度加快的。
实际上布局只要在最外的用绝对定位就好了啊，比如说整个网页分三大块，你就#top #left #right设置成绝对定位，里面的具体细节用<div>,<ul>，<li>，<ol>等等的magin和padding值确定就好了。

也就是说最外层用绝对定位，以%的方式设置具体模块，防止网页变形，里面用相对定位，解决雍容问题。

至于float这个属性，是浮动的意思，有四个属性：interit，right，left，none。常用的就是right，left，none这三个属性。
比如<div style="float:left">的意思就是使该层的下一层相对该层左浮动，因为DIV的默认浮动是向下的，这样设置就使下一层与该层并列排列了。

试试吧～

Answer 2

居中不了的问题，是因为你的body没有设置居中。加上body{margin:0 auto}
图片重新组合的问题，你不用DIV+CSS那就用TABLE啊。难道有第三种？
要么干脆别切了，整张导进去嘛。到后来来是要定义模块的位置。

Answer 3

<style type="text/css">
<!--
body{text-align:center;margin:0;padding:0;}
#Container{width:800px;margin:0 auto;}
#Header{width:800px;}
#Header_Left{float:left;width:249px;height:167px;background-image:url(images/1.gif);}
#Header_Right{float:right;width:551px;}
#Header_Right_1{width:551px;height:55px;background-image:url(images/2.gif);}
#Header_Right_2{float:left;width:348px;height:112px;background-image:url(images/3.gif);}
#Header_Right_3{float:right;width:203px;height:112px;background-image:url(images/4.gif);}
#Main{clear:both;width:800px;}
#Main_1{width:800px;height:53px;background-image:url(images/5.gif);}
#Main_2{float:left;width:183px;height:313px;background-image:url(images/6.gif);}
#Main_3{float:right;width:617px;height:313px;background-image:url(images/7.gif);}
#Footer{clear:both;width:800px;height:67px;background-image:url(images/8.gif);}
-->
</style>