首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

特殊要求的 div+css三行三列布局有什么好建议?解决方案

2012-02-05 
特殊要求的 div+css三行三列布局有什么好建议?先借用一下snmr_com(麒麟厍人)那个问题的要求:http://commun

特殊要求的 div+css三行三列布局有什么好建议?
先借用一下snmr_com   (麒麟厍人)   那个问题的要求:
http://community.csdn.net/Expert/topic/4961/4961132.xml?temp=.883114

要求:
1

左中右

2
上下:100%宽;左:像素定宽;右:像素定宽;中:自适应宽
上下:像素定高;左中右:自适应高
3
跨浏览器,ie/ff/op,div/span+css,不使用css   hack,左中右不使用嵌套
4
文件头含
<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN "
"http://www.w3.org/TR/html4/loose.dtd ">
5
暂时没想到其他要求,目前找到一个是js控制的


-------------------------------------------------
如果我的要求是如下所述,能实现么?


图示如下:

╓──────────────╖
║Top                                                   ║
╟──╥───────╥───╢
║         ║                             ║             ║
║         ║                             ║             ║
║         ║                             ║             ║
║Left║         Center         ║Right   ║
║         ║                             ║             ║
║         ║                             ║             ║
║         ║                             ║             ║
╟──╨───────╨───╢
║Bottom                                             ║
╙──────────────╜

窗口的滚动条是被hidden的。


要求:
        基本和楼主差不多,不同的是:
        在浏览器窗口尺寸变化时,页面样子还是这个样子。
       

其中:

Top,   Bottom:   100%宽,根据内容自适应高;

Left,   Right:   象素定宽

Center的宽度自适应(窗口宽度-Left宽度-Right宽度)的值

Left,   Center,   Right的高度要自适应(窗口高度-Top高度-Bottom高度)的值

其实就是Top永远在顶部,Bottom永远在底部,Left、Center、Right永远充满Top和Bottom之外的区域。


简单明了的说就是   设计一个布局,模拟一些类似的客户端应用的样子,比如Eclipse,Visio,VS等。

Top部分也许是放置主菜单和工具栏
Left和Right部分也许是放置一些辅助“窗口”
Bottom部分也许也是放辅助窗口,也许作为StatusBar
Center部分作为一个主要的工作空间,想放什么就放什么并且能滚动里面的内容。


另外有个问题还要请教,有关于那个什么box-model的问题

都说正确的box-model中width应该是除去border,padding等之后的宽度,
那么如果我有如下代码:

<div   id= "parent "   style= "width:100px;height:100px;border:2px   solid   red ">
        <div   id= "child "   style= "width:100%;height:100%;border:2px   solid   green "> text </div>
</div>

我希望parent的尺寸不会自动发生变化,无论应该是100也好,96也好,不要自动变,就保持定义时的大小,
然后child的表现就是充满parent的可用区域,并且parent不出现滚动条,child的边框也全部可见。

这个需求在以前的IE中都不用考虑,以上代码的展现就是那样的,
可现在如果加了!DOCTYPE或者在FF中,完全不是那么回事,默认情况下IE中的parent会自动改变大小,
而在FF中,child和parent的边框在右边和下边甚至交叉在一起。。。。。



我怎么觉得还是IE以前的box-model正确呢?
如果IE以前的box-model是错误的,那么我这个需求可怎么实现呢?

我怎么觉得有些地方“标准”反而把问题搞复杂了?

多谢各位指教了。




[解决办法]
极度关注......

热点排行