div的位置不會位於容器的頂部

我的容器內有塊，可以在容器內拖動。也可以重新調整大小。默認位置是7格的並排。所有這些應該放置在容器的頂部，但是相反，它們在x軸上顯示在另一個的下面。我無法弄清楚這一點，並非常感謝任何幫助。這是一個jsFiddle來演示問題和下面的html/css。謝謝。div的位置不會位於容器的頂部

#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>

來源

2013-11-09 user2014429

左邊浮動的問題是，當您重新調整一個單元格的大小時，左邊的單元格會跳到它的下面 – user2014429

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

來源

2013-11-09 19:10:18 mdesdev

偉大的解決方案。很明顯，你對可調整大小的div的風險有很好的理解。這是我將使用的解決方案。謝謝 – user2014429

不客氣;） – mdesdev