javascript - img标签的diplay属性设置为block时带来的诡异问题
高洛峰
高洛峰 2017-04-11 12:01:15
[JavaScript讨论组]

下面是我在写css的时候需要的一个问题始终无法理解:代码如下

html部分
    

上海活动

全新海岸线观战点

广州活动

全新海岸线观战点

香港活动

全新海岸线观战点

台湾活动

全新海岸线观战点

情况1:当css内的img标签的display属性不设置时,浏览器的效果如下

    

情况2:当css内的img标签的display属性设置为block时,浏览器的效果如下

    

我的问题:

(请注意我第二个p中的img标签和其他的p中的img标签顺序不一样哈)

  1. 为什么当img的diplay属性设置为block,变成块级元素时候,第二个p中的h3和p标签位置仍然没有变?不应该是顶替上来么?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
PHPz

看到你截图的效果,我猜测应该是p设置为inline-block样式引起的,图片中所有文字都是在同一水平线的,所以inline-block的元素默认vertical-align属性为middle,你可以把p的vertical-align修改为top试试,第一次回答问题,比较紧张,不正确的地方还请指正!!✨

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号