div не будет находиться в верхней части контейнера

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

Потеряйте встроенный стиль для элемента .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 2

добавить display: inline-block; к классу даты

не совсем уверен, что вы собираетесь, но если вы не собираетесь гигантский белый промежуток между вашими class элементами, то просто удалите теги встроенного стиля что установить их левое положение, и вы можете просто сделать float:left; в вашем CSS

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

Answer 3

вы должны расположить элементы абсолютных внутри контейнера.

Это означает установку position: relative на ваш контейнер. и position: absolute на ваших дочерних элементах. В основном это означает, что ваши дочерние элементы будут абсолютно позиционированы относительно к контейнеру, они находятся в

Вот рабочий codepen:. http://codepen.io/JTLR/pen/ojgLy

Другого метода поставить float: left или display: inline-block на дочерних элементах, которые сделают они сидят рядом друг с другом. Заметим, что элементы встроенного блока имеют интервал между ними по умолчанию.

Answer 4

Вам необходимо понять позицию: относительные средства. Здесь сделайте положение: абсолютное в дате class.It будет slove ваша проблема.