Question

我在容器内有块，可以在容器内拖动。并且还可以在南方重新调整大小。默认位置是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>

Answer 1

将display: inline-block;添加到您的日期类

不确定你想要什么，但是如果你不打算在你的class元素之间留下巨大的白色间距，那么只需删除设置其左侧位置的内联样式标签，你就可以做到你的css中float:left;

http://jsfiddle.net/4Bq4B/2/

Answer 2

您需要将元素绝对放置在容器中。

这意味着在您的容器上设置position: relative。和position: absolute关于你的孩子元素。这基本上意味着您的子元素将相对于它们所在的容器绝对定位。

这是一个有效的代码：http://codepen.io/JTLR/pen/ojgLy

另一种方法是将float: left或display: inline-block放在子元素上，这将使它们彼此相邻。请记住，默认情况下，内联块元素之间会有间距。

Answer 3

丢失.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;
}

Answer 4

你需要理解立场：相对意味着。这里在日期类中设置 position：absolute 。这将解决你的问题。

div不会位于容器的顶部

4 个答案: