CSS网格布局隐藏中心列并调整网格以进行补偿
问题描述 投票：0回答：1
我正在使用CSS网格布局创建表，并希望能够隐藏中心列，并让其余的列进行调整以填补缺失列的空白。我将只发布一些代码，以便您可以看到布局的工作方式。我尝试过各种技巧，但实际上，我不是CSS大师。我有几张讲述整个故事的图片。另外，HTML只是一个片段，因为它就像一英里长。
Snip
/*CSS Part*/
.grid {
display: grid;
grid-template-columns: 8% 8% 27% 27% 27%;
grid-template-rows: 40px 40px;
grid-auto-flow: row;
grid-gap: 5px;
}
.grid--full {
grid-template-columns: 300px 300px 300px;
grid-template-rows: 200px;
grid-gap: 10px;
}
.zone-Header {
grid-column: 1;
grid-row: 1 / 3;
background: url(/assets/img/patterns/breadcrumbsAOF.png) repeat;
border-radius: 5px;
}
.Bank-Front {
grid-column: 2 / 4;
grid-row: 1;
border-radius: 5px;
background: url(/assets/img/patterns/breadcrumbsAOF.png) repeat;
}
.Bank-Middle {
grid-column: 4;
grid-row: 1;
border-radius: 5px;
background: url(/assets/img/patterns/breadcrumbsAOF.png) repeat;
}
.Bank-Back {
grid-column: 5;
grid-row: 1;
border-radius: 5px;
background: url(/assets/img/patterns/breadcrumbsAOF.png) repeat;
}
/*JS part*/
$('.Middle').attr('style', 'visibility: hidden');
/* HTML */
<div class="grid">
<div class="Bank-Front">
<h2 class="text-center">FRONT</h2>
</div>
<div class="Bank-Middle Middle">
<h2 class="text-center">MIDDLE</h2>
</div>
<div class="Bank-Back">
<h2 class="text-center">BACK</h2>
</div>
<div class="Bank-Front-Header-Vane">
<h4 class="text-center">VANE</h4>
</div>
<div class="zone-Header">
<h4 class="text-center text-bold">ZONE</h4>
</div>
<!--header-->
<div class="Bank-Front-Header">
<div class="row">
<div class="col-xs-6">
<h4 class="text-center">NOZZLES</h4>
</div>
<div class="col-xs-6">
<h4 class="text-center">COLOR</h4>
</div>
</div>
</div>
<div class="Bank-Middle-Header Middle">
<div class="row">
<div class="col-xs-6">
<h4 class="text-center">NOZZLES</h4>
</div>
<div class="col-xs-6">
<h4 class="text-center">COLOR</h4>
</div>
</div>
</div>
<div class="Bank-Back-Header">
<div class="row">
<div class="col-xs-6">
<h4 class="text-center"> NOZZLES</h4>
</div>
<div class="col-xs-6">
<h4 class="text-center">COLOR</h4>
</div>
</div>
</div>
<!-----ZONE 1 ------------->
<!--zone labels-->
<div class=" zone1-Orchard">
<br />
<br />
<br />
<br />
<h5 class="text-center text-bold">TOP ZONE 1</h5>
</div>
<!--Zone1 row 1-->
<div class="zone1-Orchard-Front-Vane-1">
<center> <button class="btn btn-primary rounded" style="width:100%;">1</button></center>
</div>
<div class="zone1-Orchard-Front-1">
<div class="row">
<div class="col-xs-1 no-gutter"> </div>
<div class="col-xs-4 no-gutter">
<select class="form-control-AOF" id="V1F">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-6">
<select class="form-control-AOF z1f" id="C1F">
<option value="BROWN">BROWN</option>
<option value="LIME">LIME</option>
<option value="YELLOW">YELLOW</option>
<option value="LIGHT-BLUE">LIGHT-BLUE</option>
<option value="ORANGE">ORANGE</option>
<option value="RED">RED</option>
<option value="GREY">GREY</option>
<option value="GREEN">GREEN</option>
<option value="BLACK">BLACK</option>
<option value="BLUE">BLUE</option>
</select>
</div>
</div>
</div>
<div class="zone1-Orchard-Middle-1 Middle">
<div class="row">
<div class="col-xs-1"> </div>
<div class="col-xs-4">
<select class="form-control-AOF" id="V1M">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-6 smaller">
<select class="form-control-AOF z1m" id="C1M">
<option value="BROWN">BROWN</option>
<option value="LIME">LIME</option>
<option value="YELLOW">YELLOW</option>
<option value="LIGHT-BLUE">LIGHT-BLUE</option>
<option value="ORANGE">ORANGE</option>
<option value="RED">RED</option>
<option value="GREY">GREY</option>
<option value="GREEN">GREEN</option>
<option value="BLACK">BLACK</option>
<option value="BLUE">BLUE</option>
</select>
</div>
</div>
</div>
<div class="zone1-Orchard-Back-1">
<div class="row">
<div class="col-xs-1 "></div>
<div class="col-xs-4">
<select class="form-control-AOF" id="V1B">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-xs-6">
<select class="form-control-AOF z1b" id="C1B">
<option value="BROWN">BROWN</option>
<option value="LIME">LIME</option>
<option value="YELLOW">YELLOW</option>
<option value="LIGHT-BLUE">LIGHT-BLUE</option>
<option value="ORANGE">ORANGE</option>
<option value="RED">RED</option>
<option value="GREY">GREY</option>
<option value="GREEN">GREEN</option>
<option value="BLACK">BLACK</option>
<option value="BLUE">BLUE</option>
</select>
</div>
</div>
</div>
整个网格看起来像什么
当我隐藏中心列时
我希望它做什么
欢迎所有建议-谢谢！
1个回答
0
投票
投票
我很好奇您为什么不使用实际的表？我知道您只是向我们显示布局的图像，我不知道您的项目的所有要求。但这似乎是使用HTML表的理想场所。使用表肯定可以访问。
https://www.w3.org/WAI/tutorials/tables/irregular/
无论如何，您可以使用grid-auto-flow折叠从DOM中删除的列。
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
在下面的简单网格中，从DOM中删除任何网格子级将导致剩余的子级回流以填充该空间。我希望您可以在当前代码中使用它。祝你好运。
HTML：
<div class="grid">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
CSS：
.grid {
background-color: lightblue;
height: 100%;
display: grid;
grid-auto-flow: column dense;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
}
.a {
background-color: lightcoral;
}
.b {
background-color: lightgreen;
}
.c {
background-color: yellow;
}
.d {
background-color: violet;
}
最新问题
- 如何获取推送通知的Android设备令牌？
- postgresvacuum 的行为
- Tensorflowjs keras 模型节点权重无法识别
- 在日历视图中的微软图形API中获取日历颜色
- 如何在 mui x datagrid 中以编程方式选择/取消选择行
- 在十一，如何修改响应头，在响应头中我想添加 Strict-Transport-Security: max-age=31536000;包含子域；
- 在 Tensorflow 中实现自定义层的问题
- 为什么我会收到“Uncaught SyntaxError”，导致 next.js 中出现 ChunkLoadError 和 Hydration 错误？
- Angular ngSrc 不接受动态值
- R POSIXct 日期相等未按预期工作
- com.mysql.cj.jdbc.exceptions.CommunicationsException：通信链路故障连接重置
- 在opencv c++中播放视频文件
- Unity3D firebase AUTH 不适用于 ANDROID
- 枚举方法线程安全
- WPF 中的分页集合视图
- 有办法恢复堆叠差异吗？
- 如何在 Angular 4 的下拉菜单中正确绑定枚举？
- “docker-compose.yml”文件中指定版本的第一行是什么意思？
- 如何在没有 PyDev 项目的情况下调试 python 脚本？
- 尝试获取Odata但无法创建entityContainer； getDefaultEntityContainer 给出空指针错误
© www.soinside.com 2019 - 2024. All rights reserved.