Question

我有4格（红色，黄色，绿色，蓝色）就我而言，每行有2个。我需要生长第二个（黄色），而红色下面没有空隙，只有蓝色必须下降才能跟随黄色。

我有一支电笔，如果您想尝试的话。 Code

<div id="app">
  <v-app id="inspire">
    <v-item-group>
      <v-container>
        <div class="row">
          <v-col
            v-for="(item, index) in colors"
            :key="index"
            cols="12"
            md="6"
          >
              <v-card
                class="align-center"
                height="auto"
                :color="item.color"
              >
                <v-card-text v-for="(c, ind) in item.content" :key="ind" @click="colors[index].content.push(c)">{{c}}</v-card-text>
              </v-card>
          </v-col>
        </div>
      </v-container>
    </v-item-group>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    colors: [{color: 'red', content: ['sample content']},
            {color: 'yellow', content: ['sample content']},
            {color: 'green', content: ['sample content']},
            {color: 'blue', content: ['sample content']}]
  }
})

Answer 1

div可能会增长而没有空格，您需要使用display：flex和flex direction

在下面的代码中，我考虑了两列颜色不断增长的情况垂直

您可以有N种颜色

可工作的Codepen在这里： https://codepen.io/chansv/pen/GRROyQZ?editors=1010

<div id="app">
  <v-app id="inspire">
    <div>
    <div  style="width:50%; float: left;display: flex;
  flex-direction: column;">
      <div  v-for="(color, index) in colors" :key="index" v-if="index % 2 == 0 && index == 0">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
      <div v-for="(color, index) in colors" :key="index" style="flex-grow: 1;" v-if="index % 2 == 0 && index != 0">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
    </div>

    <div  style="width:50%;float: left;display: flex;
  flex-direction: column;">
      <div v-for="(color, index) in colors" :key="index" v-if="index % 2 == 1 && index == 1">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
      <div style="flex-grow: 1;" v-for="(color, index) in colors" :key="index" v-if="index % 2 == 1 && index != 1">
        <v-card height="auto"
          :color="colors[index].color"
                >
          <v-card-text v-for="(c, ind) in colors[index].content" :key="ind" @click="colors[index].content.push(c)">
            {{c}}
          </v-card-text>
        </v-card>
      </div>
    </div>
    </div>
  </v-app>
</div>


new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    colors: [{color: 'red', content: ['sample content']},
            {color: 'yellow', content: ['sample content']},
            {color: 'green', content: ['sample content']},
            {color: 'blue', content: ['sample content']},
            {color: 'pink', content: ['sample content']},
            {color: 'grey', content: ['sample content']},
            {color: 'orange', content: ['sample content']},
            {color: 'indigo', content: ['sample content']},
            {color: 'purple', content: ['sample content']},
            {color: 'cyan', content: ['sample content']},
            {color: 'teal', content: ['sample content']}]
  }
})

增加div而不移动其他任何东西

1 个答案: