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

Question

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

Answer 1

因为原始的 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>

等等