一行多列div布局

<div style="width: 300px; position: absolute; right: 60px; top: 50px" class="measure-class">

        <div style=" width:50% ; padding: 16px; box-sizing: border-box;  background: rgba(14, 18, 31, 0.77);  color: #ffffff;  display:inline-block;  align:middle;" v-for="(option, i) in jgModel :key="i" >

          <div style="text-align: center;" @click="go(option, i)" class="select-button">

                    <img width="25px" height="25px" :src="`jg/${option.type}.png`" style="margin-right:10px;"  />

                    <span style="vertical-align: super;">{{option.name}}</span>

         </div>

    </div>

</div>

【注意】：最外层的盒子宽度为300px,而div为块级标签，要想将其一行显示多列，需将其变为行内标签 display:inline-block; 并设置子盒子的宽度为父盒子的50%，图片和文字用另外一个div包裹，设置该div的样式来控制整体的样式。