前端CSS布局,两个div 为inline-block, 在一个内部添加p会影响另外一个的布局原因?

就是左右两个div是display:inline-block; 但是当我往第一个div中插入块级标签时,右边的div自动往下移动,这是为什么呢?先谢过各位大佬了图片说明

7个回答

Lian2017
dsbdo 已参读,谢谢大佬的指导
大约 2 年之前 回复

这些的话 怎么说都不好使 你直接开f12开发找到左上角的小鼠标 一个个放到元素上去看他们具体是怎么放的

Lian2017
dsbdo 谢谢你的指导
大约 2 年之前 回复
Lian2017
dsbdo 之前试过了,是vertical-align 与line-height 的锅
大约 2 年之前 回复

也不知到原因,之前用的时候也会出现这种情况,如果两个高度一样的话,在外面价格div高度和它一样就能解决,不一样的话还是用浮动吧

Lian2017
dsbdo 嗯嗯,是vertical-align与line-height的锅
大约 2 年之前 回复

设置成行内元素 里面又加块级元素

建议你用浮动

 <div style="width: 100%;overflow: hidden;">
            <div style="width: 50%;height: 200px;background: yellow;float: left;text-align: center;">
                <p>helloworld</p>
            </div>
            <div style="width: 50%;height: 200px;background: chartreuse;float: right;text-align: center;">
                <p>helloworld</p>
            </div>
  </div>
Lian2017
dsbdo 嗯嗯,已经解决,是veritical-align与line-height的原因
大约 2 年之前 回复

是因为baseline的原因 看左边最下面的文字和右边文字是对齐的

必须拜读张鑫旭的文章了

CSS深入理解vertical-align和line-height的基友关系 " 张鑫旭-鑫空间-鑫生活
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

非常感谢各位大佬的指导,谢谢各位

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!