div嵌套两个行内块为什么会这样

img

img

为什么显示出来是这样呢？我以为她会左边是图片，右边绿色的块，但为什么绿色的块跑到下面去了？
俺刚接触，烦请xdm指点一下，感谢

因为原始的 inline-block 元素之间会有一个空格的间隙，
浏览器解析的时候会把代码标签之间的空白解析成为一个空格；
所以 两个span + 空格超出了容器的最大宽度，就出现了换行

    <div>
        <span class="aa">
            <img src="" alt="" width="300px" height="300px">
        </span> <!-- 这里会解析成为一个空格-->
        <span class="bb">

        </span>
    </div>

解决方法：
1: 让标签之间没有空白

    <div>
        <span class="aa">
            <img src="" alt="" width="300px" height="300px">
        </span><!--  使用注释填充
        --><span class="bb">
        </span>
    </div>

<div>
        <span class="aa">
            <img src="" alt="" width="300px" height="300px">
        </span><span class="bb">

        </span>
    </div>

2: 修改父元素的 display: flex;

    <div>
        <span class="aa">
            <img src="" alt="" width="300px" height="300px">
        </span>
        <span class="bb">

        </span>
    </div>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background: purple;
        }
        .aa{
            display: inline-block;
            width: 300px;
            height: 300px;
            background: yellow;
        }

        .bb{
            display: inline-block;
            background: green;
            width: 300px;
            height: 300px;
        }
    </style>

等等

给div加个display:flex; 或者给.aa和.bb都加上float:left;就行了


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 600px;
            height: 300px;
            margin: 0 auto;
            font-size: 0;
            background: purple;
        }
        .aa{
            display: inline-block;
            width: 300px;
            height: 300px;
            background: yellow;
        }
        .bb{
            display: inline-block;
            width: 300px;
            height: 300px;
            background: green;
        }
    </style>
</head>
<body>
    <div>
        //解决一 给父级的div 添加 font-size:0 的样式
        <span class="aa">
            <img src="./1.jpg" alt="家具" width="300" height="300">
        </span>
        <span class="bb"></span>

    </div>
  //方式二  行内的标签 不存在换行 都紧挨着
 <div>
        <span class="aa"><img src="./1.jpg" alt="家具" width="300" height="300"></span><span class="bb"></span>
    </div>
</body>
</html>

在html中  行内快标签的之间换行会被当做空格处理  
也就是所 你给600 放两个300的行内块 
如果你的标签没有换行  那么放得下 按照300+300
但是一旦你存在标签没挨着写 存在空格(两个span[行内块]有空格) 那么的的实际宽度会按照300+300+空格的大小 大于600 出现换行
解决
 //解决一 给父级的div 添加 font-size:0 的样式
//方式二  行内的标签 不存在换行 都紧挨着