您的位置：首页 > Web前端 > HTML

HTML标签换行导多个inline-block元素不能在同一行，img之间会有空格

2018-01-18 18:39 1116 查看

一、当让两个各占50%的元素使用inline-block位于同一行时，HTML的标签换行会导致右边元素掉下去。

如下代码：

<style>
*{
margin: 0;
padding: 0;
font-size: 20px;
}
.frame{
width: 100%;
}
.frame1{
background-color: #3b93ff;
display: inline-block;
width: 50%;
}
.frame2{
background-color: #3d9400;
display: inline-block;
width: 50%;
}
</style>

<div class="frame">
<div class="frame1"><div class="a1"><a>123</a></div> </div>
<div class="frame2"><div class="a2"><a>123</a></div></div>
</div>

结果如图：右边元素掉下去了

当让这两个

div

位于同一行时：

<div class="frame1"><div class="a1"><a>123</a></div> </div><div class="frame2"><div class="a2"><a>123</a></div></div>

此时这两个元素才位于同一行

二、三张图位于同一行时，每张图之间会有间隔

<div class="img3">
<img src="waifu.png">
<img src="waifu.png">
<img src="waifu.png">
</div>

此时效果图如图：

每张图会有间隔，当代码取消换行之间，间隔会消失

用JS取img3节点下的第一个子节点，你会发现返回的是text节点，你查看每个img节点，你会发现每个img节点的下一个兄弟节点都是text节点

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航