div转为行内块元素后不同行

img

img

img

我是想用我目前已经学的知识像图三一样布局，别的没有问题就是div里面加了图片之后会出现图一的情况，如果不加那个图片的话div是可以并行的，但是加了图片之后就不可以了，这是为什么？（图片是300*300的，也没有超呀）

<html>
<head>
<style>
    div.div1 {
        float: left;
        display:inline-block;
        width: 200px;
        background-color: blue;
    }
    div.div2 {
        float: left;
        display:inline-block;
        width: 200px;
        background-color: red;
    }

    div {
    height:400px;
    }
</style>
</head>
<body>
    <div class="div1">Div1</div>
    <div class="div2">Div2</div>
</body>
</html>

前端的布局现在用CSS3 弹性盒子，修改此属性 display: flex; 即为弹性盒子，弹性盒子可解决左右对齐，横向排列，纵向排列，居中对齐等，要结合css3的多媒体查询，多媒体查询可以解决一个页面在电脑、手机、ipad端的不同布局的兼容问题。现在的页面早就不能用块元素，行内元素，float等来解决得了的。