gpt4 book ai didi

jquery - div 不会定位到容器的顶部

转载 作者:太空宇宙 更新时间:2023-11-03 23:51:38 24 4
gpt4 key购买 nike

我在一个容器内有 block ,可以在其容器内拖动。也可以向南调整大小。默认位置是并排放置 7 个 div。它们都应该位于容器的顶部,但它们在 x 轴上一个下一个地出现。我无法弄清楚这一点,非常感谢任何帮助。这是一个jsFiddle演示问题和下面的 html/css。谢谢。

#calCon {
height:400px;
width:700px;
border:1px solid grey;
margin:0px;
}

.date {
width:98px;
height:30px;
border:1px solid blue;
background-color:green;
position:relative;
top:0px;
}

<div id = "calCon">
<div class = "date" style = "left:0;">cell 0</div>
<div class = "date" style = "left:100px;">cell 1</div>
<div class = "date" style = "left:200px;">cell 2</div>
<div class = "date" style = "left:300px;">cell 3</div>
<div class = "date" style = "left:400px;">cell 4</div>
<div class = "date" style = "left:500px;">cell 5</div>
<div class = "date" style = "left:600px;">cell 6</div>
</div>

最佳答案

丢失 .date 元素的内联样式并添加 position: absolute; 到它。这是一个 Fiddle

*注意:当您在容器元素中绝对定位元素时,您必须使用 margin-left 而不是 left 来包含绝对定位的元素在父元素中。

<div id ="calCon">
<div class="date">cell 0</div>
<div class="date">cell 1</div>
<div class="date">cell 2</div>
<div class="date">cell 3</div>
<div class="date">cell 4</div>
<div class="date">cell 5</div>
<div class="date">cell 6</div>
</div>


.date {
position: absolute;
width: 98px;
height: 30px;
border: 1px solid blue;
background: green;
}
.date:nth-of-type(1) {
margin-left: 0;
}
.date:nth-of-type(2) {
margin-left: 100px;
}
.date:nth-of-type(3) {
margin-left: 200px;
}
.date:nth-of-type(4) {
margin-left: 300px;
}
.date:nth-of-type(5) {
margin-left: 400px;
}
.date:nth-of-type(6) {
margin-left: 500px;
}
.date:nth-of-type(7) {
margin-left: 600px;
}

关于jquery - div 不会定位到容器的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19881835/

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