- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试更改某些列中的行的放置方式。如附图所示,我希望红卡项目延伸到放置的行上,但是我不确定我该怎么做。然后,蓝色卡片项目应该移动到底部,而不是像图片上那样留下空白。
这是代码:
Codepen
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
})
})
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row>
<v-col cols="4" class="d-flex child-flex">
<v-card color="orange lighten-2" tile flat>
<v-card-text>Card 1</v-card-text>
</v-card>
</v-col>
<!-- triple colum here-->
<v-row class="flex-column">
<v-col class="d-flex child-flex">
<v-card color="indigo lighten-2" dark tile flat>
<v-card-text>Card 3 Extended To fit</v-card-text>
</v-card>
</v-col>
<v-col class="d-flex child-flex">
<v-card color="indigo lighten-2" dark tile flat>
<v-card-text>Card 3 Extended To fit</v-card-text>
</v-card>
</v-col>
<v-col class="d-flex child-flex">
<v-card color="indigo lighten-2" dark tile flat>
<v-card-text>Card 3 Extended To fit</v-card-text>
</v-card>
</v-col>
<!-- next col -->
</v-row>
<v-col cols="4">
<v-card color="red lighten-2" dark tile flat>
<v-card-text>
{{ lorem }} {{ lorem }}
{{ lorem }}{{ lorem }}
{{ lorem }} {{ lorem }}
</v-card-text>
</v-card>
</v-col>
<!-- bottom row -->
<v-col cols="4" class="d-flex child-flex">
<v-card color="purple lighten-1" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-col>
<v-col cols="4" class="d-flex child-flex">
<v-card color="green lighten-2" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-col>
<v-col cols="4">
<v-card color="blue lighten-2" tile flat>
<v-card-text>{{lorem}} {{lorem}}</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
最佳答案
我花了很多时间重新安排 Vuetify <v-col>
和 <v-row>
,基本上试图将第三列单独分离出来,这样蓝色可以缩小,红色可以增长。
它几乎可以工作,但是其他一些功能丢失了(例如靛蓝跨越整个列和行槽消失)。流体(蛇形)布局和 <v-row>
之间似乎有一些奇怪的交互。 & <v-col>
机制。
此外,当您更改页面宽度时,装订线会令人不安。
相反,我通过切换到 得到了相当完美的结果。 CSS 网格 - 更简单,更容易调整。
当您更改页面宽度时,它也可以顺利响应。
Codepen
HTML
首先要注意,否<v-row>
或 <v-col>
元素,就是你想要展示的东西。您可以按任何顺序将它们放在页面上(好吧,在容器内),CSS 网格负责放置。
<div id="app">
<v-app id="inspire">
<v-container fluid class="myGrid">
<v-card class="orange" color="orange lighten-2" tile flat>
<v-card-text>Card 1</v-card-text>
</v-card>
<v-card class="indigo1" color="indigo lighten-2" dark tile flat>
<v-card-text>Card 3 Extended To fit</v-card-text>
</v-card>
<v-card class="indigo2" color="indigo lighten-2" dark tile flat>
<v-card-text>Card 3 Extended To fit</v-card-text>
</v-card>
<v-card class="indigo3" color="indigo lighten-2" dark tile flat>
<v-card-text>Card 3 Extended To fit</v-card-text>
</v-card>
<v-card class="red" color="red lighten-2" dark tile flat>
<v-card-text>
{{ lorem }} {{ lorem }}
{{ lorem }}{{ lorem }}
{{ lorem }} {{ lorem }}
</v-card-text>
</v-card>
<v-card class="purple" color="purple lighten-1" tile flat>
<v-card-text>{{lorem}} {{lorem}}</v-card-text>
</v-card>
<v-card class="green" color="green lighten-2" tile flat>
<v-card-text>{{lorem}} {{lorem}}</v-card-text>
</v-card>
<v-card class="blue" color="blue lighten-2" tile flat>
<v-card-text>{{lorem}}</v-card-text>
</v-card>
</v-container>
</v-app>
</div>
grid-template-areas
,附加到该属性的字符串表示矩阵)。
.myGrid {
display: grid;
grid-template-columns: auto auto auto; // 3 even self-sizing cols
grid-template-rows: repeat(3, 1fr) auto auto; // 5 rows, first 3 expand & last 2 shrink
grid-template-areas:
"orange indigo1 red"
"orange indigo2 red"
"orange indigo3 red"
"purple green red"
"purple green blue"
;
grid-gap: 0.5rem;
}
.orange { grid-area: orange }
.indigo1 { grid-area: indigo1 }
.indigo2 { grid-area: indigo2 }
.indigo3 { grid-area: indigo3 }
.red { grid-area: red }
.green { grid-area: green }
.purple { grid-area: purple }
.blue { grid-area: blue }
关于javascript - Vuetify 网格系统行管理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59938294/
猫f1.txt阿曼维沙尔阿杰贾伊维杰拉胡尔曼尼什肖比特批评塔夫林现在输出应该符合上面给定的条件 最佳答案 您可以在文件读取循环中设置一个计数器并打印它, 计数=0 读取行时做 让我们数一数++ if
我正在尝试查找文件 1 和文件 2 中的共同行。如果公共(public)行存在,我想写入文件 2 中的行,否则打印文件 1 中的非公共(public)行。fin1 和 fin2 是这里的文件句柄。它读
我有这个 SQL 脚本: CREATE TABLE `table_1` ( `IDTable_1` int(11) NOT NULL, PRIMARY KEY (`IDTable_1`) );
我有 512 行要插入到数据库中。我想知道提交多个插入内容是否比提交一个大插入内容有任何优势。例如 1x 512 行插入 -- INSERT INTO mydb.mytable (id, phonen
如何从用户中选择user_id,SUB(row, row - 1),其中user_id=@userid我的表用户,id 为 1、3、4、10、11、23...(不是++) --id---------u
我曾尝试四处寻找解决此问题的最佳方法,但我找不到此类问题的任何先前示例。 我正在构建一个基于超本地化的互联网购物中心,该区域分为大约 3000 个区域。每个区域包含大约 300 个项目。它们是相似的项
preg_match('|phpVersion = (.*)\n|',$wampConfFileContents,$result); $phpVersion = str_replace('"','',
我正在尝试创建一个正则表达式,使用“搜索并替换全部”删除 200 个 txt 文件的第一行和最后 10 行 我尝试 (\s*^(\h*\S.*)){10} 删除包含的前 10 行空白,但效果不佳。 最
下面的代码从数据库中获取我需要的信息,但没有打印出所有信息。首先,我知道它从表中获取了所有正确的信息,因为我已经在 sql Developer 中尝试过查询。 public static void m
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我试图在两个表中插入记录,但出现异常。您能帮我解决这个问题吗? 首先我尝试了下面的代码。 await _testRepository.InsertAsync(test); await _xyzRepo
这个基本的 bootstrap CSS 显示 1 行 4 列: Text Text Text
如果我想从表中检索前 10 行,我将使用以下代码: SELECT * FROM Persons LIMIT 10 我想知道的是如何检索前 10 个结果之后的 10 个结果。 如果我在下面执行这段代码,
今天我开始使用 JexcelApi 并遇到了这个:当您尝试从特定位置获取元素时,不是像您通常期望的那样使用sheet.getCell(row,col),而是使用sheet.getCell(col,ro
我正在尝试在我的网站上开发一个用户个人资料系统,其中包含用户之前发布的 3 个帖子。我可以让它选择前 3 条记录,但它只会显示其中一条。我是不是因为凌晨 2 点就想编码而变得愚蠢? query($q)
我在互联网上寻找答案,但找不到任何答案。 (我可能问错了?)我有一个看起来像这样的表: 我一直在使用查询: SELECT title, date, SUM(money) FROM payments W
我有以下查询,我想从数据库中获取 100 个项目,但 host_id 多次出现在 urls 表中,我想每个 host_id 从该表中最多获取 10 个唯一行。 select * from urls j
我的数据库表中有超过 500 行具有特定日期。 查询特定日期的行。 select * from msgtable where cdate='18/07/2012' 这将返回 500 行。 如何逐行查询
我想使用 sed 从某一行开始打印 n 行、跳过 n 行、打印 n 行等,直到文本文件结束。例如在第 4 行声明,打印 5-9,跳过 10-14,打印 15-19 等 来自文件 1 2 3 4 5 6
我目前正在执行验证过程来检查用户的旧密码,但问题是我无法理解为什么我的查询返回零行,而预期它有 1 行。另一件事是,即使我不将密码文本转换为 md5,哈希密码仍然得到正确的答案,但我不知道为什么会发生
我是一名优秀的程序员,十分优秀!