html - 在不移动任何其他内容的情况下增长 div
问题描述
我有 4 个 div (红色、黄色、绿色、蓝色)在我的情况下,我每行有 2 个。我需要在红色下方没有间隙的情况下种植第二个(黄色),只有蓝色必须向下跟随黄色。
我有一支密码笔如果你想试试。 代码
<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']}]
}
})
解决方案
可以让 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']}]
}
})
推荐阅读
- php - 如何在以下代码中使用 PHP 调整图像大小?
- html - Html链接不可点击
- python - 无法从python中的核心导入请求者
- ssl - 在 Raspberry Pi 上使用 lighttpd 激活 SSL
- javascript - setData() 不绘制所有数据
- c++ - 如何将 std::string 转换为原始字符串?
- docker - 如何使用弹性 beantalk 部署 dockerized laravel 应用程序?
- javascript - Javascript画布游戏开发-如何操作游戏棋子位置
- swashbuckle - Swashbuckle.AspNetCore 升级获取类似操作id
- php - Laravel8 laravelcollective/remote 我可以创建动态连接吗