首页前端开发CSSline-height 失效解决

line-height 失效解决

时间2024-05-22 18:10:03发布访客分类CSS浏览86
导读:css div不堆叠层叠一再遮挡缘由与方案办法之css怎么样让几个div不堆叠,div不重叠,div与div之间不遮挡标题问题启事,筹画法子方案思路图文教程篇。CSS5颠末三种方式筹画怎么样让div不遮挡不堆叠。 一、同级DIV有的是用f...

css div不堆叠层叠一再遮挡缘由与方案办法之css怎么样让几个div不堆叠,div不重叠,div与div之间不遮挡标题问题启事,筹画法子方案思路图文教程篇。CSS5颠末三种方式筹画怎么样让div不遮挡不堆叠。

一、同级DIV有的是用float有的没有运用组成DIV堆叠


赤色DIV与灰色配景DIV重叠表现

咱们看看代码





重叠DIV

.left{
    width:200px;
     float:left;
     color:#F00;
 border:1px solid #F00}

.nofloat{
    width:100px;
 bac千克round:#CCC}
    



left对象DIV内
nofloat对象DIV内

效果截图


两个div重叠遮挡显现

二、起因阐发:

class=left的div盒子运用了浮动属性float:left,而class=nofloat未应用。多么一个浮动DIV,一个未应用float浮动属性,以是就形成重叠征象。

三、操持方式:

1、两个均使用float浮动属性
对.left与.nofloat配置float属性,妄想遮挡层叠。(扩大浏览div并排不换行展现)


同级div但凡有float这样即可不重叠排版

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


两个div不堆叠

3、第一个div设置float,第二个div设置装备摆设margin属性把持间距让其不重叠
这类办法也是机关经常运用的,前提是带float要设置宽度,同时不带float的div设置装备摆设margin属性,把持间距门径,让不有设置装备摆设float的div错开设置float,完成div不堆叠。


垄断flaot浮动与margin间距完成div重叠遮挡

四、总结

以上是颠末两个div堆叠,从综合、筹算门径、图文贪图等方式CSS5介绍让div不堆叠法子。假如更多几个div涌现以上堆叠题目,同理运用以上法子教程异样很快筹画。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: line-height 失效解决
本文地址: https://pptw.com/jishu/665758.html
WordPress忘记密码无法登录账户怎么办(3个有效快速重置找回管理密码方法) 无需插件在WordPress内容前自动添加文章最后修改时间

游客 回复需填写必要信息