gpt4 book ai didi

html - 将 div 置于表格单元格内其他 div 的前面

转载 作者:太空宇宙 更新时间:2023-11-04 09:40:52 25 4
gpt4 key购买 nike

在表格单元格内,我有 .interval div,它们必须并排出现,而且我还有 .shift div,它们必须出现在前面.interval div 并具有其特定的“left”和“width”值。

到目前为止,我设法按照我想要的方式将 div 定位在单独的单元格上(.interval div 在第一行,.shift div 在第二行):

但是如何将它们放在同一个单元格中,如下图所示?

我当前的代码:

table {
width: 100%;
}
table tr,
table tr td {
height: 48px;
}
table tr td {
background-color: #EDEDED
}
.interval {
height: 48px;
float: left;
background-color: #f9f2e2;
box-sizing: border-box;
border-left: solid 1px #d5cbc2;
width: 10%;
}
.shift {
height: 40px;
float: left;
position: relative;
background-color: #e9e2d2;
}
.shift1 {
left: 10%;
width: 20%;
}
.shift2 {
left: 40%;
width: 10%;
}
.shift3 {
left: 80%;
width: 20%;
}
<table>
<tr>
<td>
<div class="interval"></div>
<div class="interval"></div>
<div class="interval"></div>
<div class="interval"></div>
<div class="interval"></div>
<div class="interval"></div>
<div class="interval"></div>
</td>
</tr>
<tr>
<td>
<div class="shift shift1"></div>
<div class="shift shift2"></div>
</td>
</tr>
</table>

最佳答案

你需要给 .shift position:absolute; 并将它放在其他 div 中,然后定位它们。

包含 .shift 元素的 Div 必须具有 position:relative 属性。

这是 jsfiddle https://jsfiddle.net/8tkue3qn/

关于html - 将 div 置于表格单元格内其他 div 的前面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39935926/

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