在不移动任何其他内容的情况下增长 div答案

【问题标题】：Grow a div without moving anything else在不移动任何其他内容的情况下增长 div
【发布时间】：2019-11-01 04:33:49
【问题描述】：

我有 4 个 div（红、黄、绿、蓝）就我而言，我每行有 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']}]
  }
})

【问题讨论】：

相关：Evenly distribute elements in columns 总结：可能做不干净。
你是说你想让黄色垂直生长，这样绿色就不会被压下去？如果是这样，您可以将红色和绿色放在一列（6 宽）中，将黄色和蓝色放在第二列（6 宽）

标签： html css vue.js

【解决方案1】：

可以让 div 不带空格地增长，你需要使用 display : flex 和 flex direction

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

你可以有 N 种颜色

在这里工作的代码笔： 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']}]
  }
})

【讨论】：