css 设置 div 在一行错位

Question

这是前端页面 用的是 v-for 点击循环添加, 后面+号是用css样式做的， 如下图， 请各位大神指点迷津， +++

 <div style="width:100%; height:280px; display:inline-block;">
        <div v-for="(a,index) in stacKopolis" :key="index + '_stack'" style="width:30%; margin-right:20px; margin-top:20px; display:inline-block;"  >
            <div style="background:#FFF; border:1px solid lightgray; height:280px; cursor:pointer;" >
                <div style=" width:100%; height:75%; text-align:center; padding-top:50px; "> <img src="../../images/房子子.png" > </div> 
                <div style="width:100%; height:20%; text-align:center; font-size:24px; ">{{aaa}}</div>
            </div>
        </div>
        <!-- ========================== -->
        <div style="width:30%;  margin-top:20px;" >
            <div class="add" @click="createFloor"></div>
        </div>
    </div>

methods 里面的：

 newFloor(){
        this.stacKopolis.push({});
        this.opened=false;
    },

Answer 1

在 inline-block 的 item 上加一个 vertical-align: top;