|
结构层
现在我们将结构层在前一个案例的基础上作了一下调整，因此就成了下面这样一种结构了：
<div class="box">
<!--第一行—顶部*/-->
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span>
<!--第二行—中间内容区*/-->
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">内容主体区域</div>
<!--第三行—底部*/-->
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div>
样式层
下面是主要的样式设置：
/*总容器*/
.box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;}
.box span{display:block;}
/*顶部样式*/
.top{height:10px;padding:0 10px;}
.t_l,.t_r{width:10px;height:10px;font-size:0%;margin-top:-10px;}
.t_l{float:left;background:#ff0000;}/*左上角*/
.t_r{float:right;background:#ff0000;}/*右上角*/
.t_m{height:10px;font-size:0%;width:100%;background:#7F0000;}/*这是可左右伸展的区域，两例留出空白便于放置左右角容器*/
/*中间样式*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*两列等高*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000;} /*左边框*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000;} /*右边框*/
/*底部样式*/
.b_m{padding:0 10px;height:10px;}/*这是可左右伸展的区域，两例留出空白便于放置左右列同高容器*/
.b_m span{width:100%;height:10px;font-size:0%;background:#7F0000;}
.b_l,.b_r{height:10px;font-size:0%;width:10px;margin-top:-10px;}
.b_l{float:left;background:#ff0000;}/*左下角*/
.b_r{float:right;background:#ff0000;}/*右下角*/
经过上述设置后，我们的九宫格就算完成了，它是“牢不可破”的，会随着内容主体的宽高动态地向各个方向自由伸展。在此模型中，为了演示的效果，我将总容器的宽度设置了一个百分比50%，你可以根据你的实际需要调整它的大小，其内部会随着它的宽度值自动填充整个区域，不会撑破父容器。如下图所示：
你可以用八张图片来制作一个漂亮的九宫格盒子。看看它的完美表现。
本模型在以下浏览器中测试通过：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
经典论坛交流：
http://bbs.blueidea.com/thread-2934922-1-1.html
本文链接：http://www.blueidea.com/tech/web/2009/6805.asp 
出处：蓝色理想
责任编辑：bluehearts
上一页 牢不可破的九宫格布局 [1] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
第 1 页 
第 2 页 牢不可破的九宫格布局 [2]
