解决：HTML页面中div框架图片拼接中间存在缝隙问题

最新推荐文章于 2022-06-10 23:04:46 发布

不是吧！

最新推荐文章于 2022-06-10 23:04:46 发布

阅读量936

点赞数 1

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44100455/article/details/109722347

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

解决：HTML页面中div框架图片拼接中间存在缝隙问题
修改之前代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片</title>
</head>
<body>
<div id="od" align="center" >

    <div class="m" id="a">

        <img src="1.jpg" height="400px" width="300px"/>

    </div>

    <div class="m" id="b" >

        <img src="2.jpg" height="400px"  width="300px"/>

    </div>
	
	<div class="m" id="c" >

        <img src="3.jpg" height="400px"  width="300px"/>

    </div>
    
</div>
</body>
</html>

在这里插入图片描述
在父级div标签中添加如下属性：

style="font-size: 0%"

修改代码之后如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片</title>
</head>
<body>
<div id="od" align="center" style="font-size: 0%" >

    <div class="m" id="a">

        <img src="1.jpg" height="400px" width="300px"/>

    </div>

    <div class="m" id="b" >

        <img src="2.jpg" height="400px"  width="300px"/>

    </div>
	
	<div class="m" id="c" >

        <img src="3.jpg" height="400px"  width="300px"/>

    </div>
    
</div>
</body>
</html>

效果如下：
在这里插入图片描述

不是吧！

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决：HTML页面中div框架图片拼接中间存在缝隙问题

解决：HTML页面中div框架图片拼接中间存在缝隙问题修改之前代码如下：<!doctype html><html><head> <meta charset="utf-8"> <title>图片</title></head><body><div id="od" align="center" > <div class="m" id="a">
复制链接

扫一扫

专栏目录