0

我在一个容器中有块，可以在它们的容器中拖动。也可以向南重新调整大小。默认位置是 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>
4

4 回答 4

1

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

不太确定您要做什么，但是如果您不打算在class元素之间使用巨大的白色间距，则只需删除设置其左侧位置的内联样式标签，您就可以简单地float:left;在您的 css 中执行

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

于 2013-11-09T19:05:23.503 回答
1

您需要将元素绝对定位在容器内。

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

这是一个工作代码笔：http: //codepen.io/JTLR/pen/ojgLy

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

于 2013-11-09T19:06:58.740 回答
1

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

*注意：当您在容器元素内绝对定位元素时，您必须使用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;
}
于 2013-11-09T19:10:18.193 回答
0

您需要了解位置：相对意味着。在这里 make position:absolute in date class.它会解决你的问题。

于 2013-11-09T19:46:38.340 回答