关于#javascript#的问题：蓝色节点位于屏幕水平居中位置，下面子节点怎么根据蓝色节点，像图中节点一样（下面子节点的个数是不确定的）

请教大家个问题，蓝色节点位于屏幕水平居中位置，下面子节点怎么根据蓝色节点，计算他的位置啊，像图中节点一样（下面子节点的个数是不确定的）

img

img


给你提供个思路，具体就不写了
（1）、创建一个组件，由父组件传入位置信息和数组信息，位置信息读取节点距离屏幕的位置就行。
（2）、使用el-col组件，宽度支持传入参数自适应变化，把数组的长度传进去，就实现了自适应变化。
（3）、el-col里写个div，样式自己随便写。
代码如下：

<html>
   <head>
      <title>VueJs 在线编辑器</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
      </script>
       <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
   </head>
    <style>
        .bg-purple {
            border: 1px solid black;
        }
    </style>
   <body>
      <div id = "intro">
          <el-row :gutter="2">
            <el-col :span="24/allArr.length" v-for="item in allArr" :key="item.id">
              <div class="bg-purple" align="center">
                  {{item.title}}
              </div>
            </el-col>
          </el-row>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: '我的第一个VueJS任务',
               allArr: [
                   {
                       id: 1,
                    title: "是"
                   },
                   {
                       id: 2,
                    title: "否"
                   }
               ]
            }
         });
      </script>
   </body>
</html>