在HTML开发中如何利用DIV实现这样的布局?

2025-03-10 18:07:34
推荐回答(3个)
回答1:

田字格布局,要求大小相同的四个正方形。而html里div如果不加控制的话是独占一行的,现在要做的是把四个大小相同的方块,排列成“田”字。
第一步、新建html文档并搭建框架
新建一个TXT文档,重命名为“田子格布局.html”,然后用记事本打开,输入表头信息,已经html整体框架搭建。包括head与body。
第二步、DIV布局
分别复制4个不同的div作为4部分,并且分别命名为不同id;显示内容为块1、块2、块3、块4。
【提示】div在html里是单独占一列的(如果不控制),现在4个div布局完成。
【代码如下】


块1

块2

块3

块4




第三步、CSS控制4个DIV显示
输入style然后开始对4个div进行控制,分别对四个块进行大小和颜色的设定,处理之后在浏览器中打开显示如下图所示。
【提示】由于是田子格,所以四个div大小应该相同,为了可以区分颜色分别采用不同的颜色。
【代码如下】

第四步、使用浮动
在CSS里控制输入float:left;四个div全部输入一样内容,这时候看到的是四个并排的div,而没有达到想要的效果,如下图所示。
【代码如下】

第五步、清除浮动
在第三块上使用清除浮动clear:left;其余的代码保持不变,然后保存代码,刷新打开的页面,就会看到一个田字格了,如下图所示。
【代码如下】
#prat3{
width: 200px;
height: 200px;
background: yellow;
float: left;
clear: left;
【注意】只清除第三块的就可以了。
【完整的代码】




田字格布局



块1

块2

块3

块4



回答2:

中间红色那个DIV定义它的position,然后利用margin定位!!

回答3:

下面三个你自己知道吧 最后一个 可以用绝对定位 然后调Top 或者直接调margin-top为负数