css怎么让几个div不重叠

2024-01-18 11:07 小编

css div不堆叠层叠反复遮挡缘故原由与解决办法之css怎样让几个div不堆叠,div不堆叠,div与div之间不遮挡标题问题启事,打点方式设计思绪图文教程篇。CSS5经过三种方式希图怎样让div不遮挡不堆叠。

一、同级DIV有的是用float有的不有运用形成DIV堆叠

红色DIV与灰色背景DIV重叠显示
红色DIV与灰色布景DIV重叠展现

我们看看代码

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>堆叠DIV</title>
<style>
.left{width:200px; float:left; color:#F00; border:1px solid #F00}
.nofloat{width:100px; bac公斤round:#CCC}
</style>
</head>
<body>
<div class="left">left对象DIV内</div>
<div class="nofloat">nofloat对象DIV内</div>
</body>
</html>

成效截图

两个div重叠遮挡显示
两个div重叠遮挡表示

二、起因剖析:

class=left的div盒子应用了浮动属性float:left,而class=nofloat未应用。何等一个浮动DIV,一个未使用float浮动属性,以是就组成重叠景遇。

三、治理门径:

1、两个均运用float浮动属性
对.left与.nofloat配置float属性,经管遮挡层叠。(扩展涉猎 div并排不换行体现)

同级div都是有float这样即可不重叠排版
同级div都是有float何等就可不堆叠排版

2、两个都不运用浮动属性。
两个div都不设置float浮动,筹画重叠标题。

两个div不重叠了
两个div不重叠

3、第一个div设置装备摆设float,第二个div设置装备摆设margin属性垄断间距让其不堆叠
这种办法也是布局常用的,前提是带float要配置宽度,同时不带float的div设置margin属性,利用间距方法,让没有设置float的div错开配置float,实现div不重叠。

利用flaot浮动与margin间距实现div重叠遮挡
把持flaot浮动与margin间距完成div堆叠遮挡

四、总结

以上是经由两个div重叠,从解析、贪图办法、图文打算等方式CSS5引见让div不重叠法子。假定更多几个div呈现以上堆叠标题问题,同理运用以上方法教程同样很快规画。


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码