div's не будет располагаться в верхней части контейнера

Question

div's не будет располагаться в верхней части контейнера

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>

user2014429 09 нояб. 2013, в 20:22

Источник

0

Проблема с плавающей левой стороной заключается в том, что при изменении размера одной ячейки под ней прыгает слева
user2014429 09 нояб. 2013, в 19:21

Теги:

jquery

html

css

jquery-ui

4 ответа

1

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

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

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

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

Joe Taylor 09 нояб. 2013, в 17:33

1

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

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

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

Corey Rowell 09 нояб. 2013, в 17:32

0

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

rana_stack 09 нояб. 2013, в 17:00

Ещё вопросы

Проблема с плавающей левой стороной заключается в том, что при изменении размера одной ячейки под ней прыгает слева

mdesdev · Accepted Answer · 2013-11-09T17-33-00.000Z

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

отличное решение. Очевидно, у вас есть хорошее понимание опасностей изменяемого размера div. Это решение, которое я буду использовать. Спасибо