Div设计Cms布局混乱解决

编程开发 / / at

本文中所常涉及到布局混乱截图如下:
[singlepic id=299 w=320 h=240 float=]
我们想要的效果图如下:
[singlepic id=300 w=320 h=240 float=]
1:在网站布局时,常会用到如下布局:

<div id="Wrap">
<div id="Cont-1">
<div id="Box-1-1"></div>
<div id="Box-1-2"></div>
</div>
<div id="Cont-2">
<div id="Box-2-1"></div>
<div id="Box-2-2"></div>
</div>
</div>

我们目的是让DivBox-1-1和Box-1-2同排显示在Cont-1,DivBox-2-1和Box-2-2同排显示在Cont-2,但视觉上常常会发现Box-2-1也会跑到Cont-1里面去,尤其当我们在Css里对Box-1-1、Box-1-2、Box-2-1和Box-2-2进行float定义时,更发现如此。假如Box-1-1、Box-1-2都做了float定义,则其父DivCont-1是没有高度的,下面自然也就上去了,可以通过以下方式解决:定义Cont-1和Cont-2的宽度,并在Css里设置clear:both;就是清除两端的意思。
2:还有一种网站布局也常常会遇到这种情况,Xhtml代码如下:

<div id="Wrap">
<div id="Box-1-1"></div>
<div id="Box-1-2"></div>
<div id="Box-2-1"></div>
<div id="Box-2-2"></div>
</div>

本人不是很推荐这种,如果有条件可以改成第一种形式,对今后网站的维护很是方便。实在不行,你也可以这样改:

<div id="Wrap">
<div id="Box-1-1"></div>
<div id="Box-1-2"></div>
<div id="Br"></div>
<div id="Box-2-1"></div>
<div id="Box-2-2"></div>
</div>

在Css里读DivBr定义clear:both;就可以了,此Br的作用就是,强制两端的Div换行。

一条回应:“Div设计Cms布局混乱解决”

  1. 神回复大全说道:

    嗯 不错 试了一下确实可以

发表评论

电子邮件地址不会被公开。 必填项已用*标注