gpt4 book ai didi

html - CSS使用div创建均匀间隔的表格

转载 作者:搜寻专家 更新时间:2023-10-31 22:19:04 30 4
gpt4 key购买 nike

我正在尝试创建一组框,每个框的宽度为 50%,边距折叠以创建均匀的间距,但也适合彼此相邻的位置。

类似于:

enter image description here

https://jsfiddle.net/b1a9L7fa/

<style>
body{
margin:0;
}
.showCases{
background-color:#000;
overflow:auto;
}
.showCases>div{
width:50%;
margin:20px;
color:#fff;
border:1px solid #fff;
}
</style>
<body>
<div class="showCases">
<div>
box1
</div>
<div>
box2
</div>
</div>
</body>

有没有办法只用父 div 和子 div 来做到这一点?还是我必须创建孙子 div?

最佳答案

使用display:table 并添加table-layout:fixed -> 所有单元格的宽度相同

.table {
width: 100%;
display: table;
table-layout: fixed;
background-color: black;
color: white;
border-spacing: 10px;
}
.trow {
display: table-row
}
.tcell {
display: table-cell;
border: 1px solid white;
}
<div class="table">
<div class="trow">
<div class="tcell">cell 1</div>
<div class="tcell">cell 2</div>
</div>
<div class="trow">
<div class="tcell">cell 3</div>
<div class="tcell">cell with more text 4</div>
</div>
</div>

关于html - CSS使用div创建均匀间隔的表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36351419/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com