我在一个容器内有 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/