2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

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

布局前端css作者:猿2048志愿者

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

评论
点击刷新
评论
猿2048志愿者
猿2048志愿者 :

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

2018-09-20 22:35:44
猿2048志愿者
猿2048志愿者 :

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

2018-09-20 22:35:45
猿2048志愿者
猿2048志愿者 :

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

2018-09-20 22:35:45
猿2048志愿者
猿2048志愿者 :

建议你用浮动

 <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>
2018-09-20 22:35:45
猿2048志愿者
猿2048志愿者 :

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

必须拜读张鑫旭的文章了

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

2018-09-20 22:35:46
猿2048志愿者
猿2048志愿者 :

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

2018-09-20 22:35:46
×添加代码片段