Как поймать позицию div и переместить ее позже (на MAC)

0

Я создаю APP, который будет доступен для пользователей. Я хотел бы сохранить положение элементов, чтобы позднее переместиться в том же месте. Я обнаружил некоторые подобные вопросы здесь, в stackoverflow, но похоже, что кто-то передал те же проблемы, что и у меня. Итак, мне интересно, правильно ли я понял.

В основном моя проблема: значение позиции элемента может отличаться в зависимости от настройки окна.

Пример. Если я поймаю левую позицию элемента, а мое окно отрегулировано на 50% (меньше) его исходного размера, то моя левая позиция будет отличаться от 100%.

Итак, если пользователь настраивает элементы с окном на 50% меньше и сохраняет его, когда тот же пользователь возвращается, элементы будут беспорядочными (если размер окна изменяется по-разному).

У меня есть этот пример http://jsfiddle.net/EV5JZ/1/

Если вы перейдете на консоль, вы увидите (значение):

console.log($('#section > li:eq(0)').find('.element:last()').position().left);

Если вы измените размер своего окна, вы получите разные значения.

Итак, я что-то пропустил или должен использовать конкретный подход?

CSS:

 <style>
    body, html {
      height: 100%;
      overflow: hidden;
    }

    #section { 
        list-style-type: none; 
        padding: 0px; 
        margin: 0px;
    }
    #section li { 
        margin: 0px 0px 1px 0px; 
        width: 99.9%; 
        background-color:#ccc; 
        border: 0px solid red; 
        min-height: 100px; 
        float: left;
    }
    </style>

HTML:

<div id="central-panel">

  <div id="template">
      <ul id="section">
        <li>

          <div class="element">1</div>
          <div class="element">2</div>
          <div class="element">3</div>
          <div class="element">4</div>

        </li>
        <li><span>::</span>Item 2</li>
        <li><span>::</span>Item 3</li>
        <li><span>::</span>Item 4</li>
      </ul>
  </div>

</div>

ОБНОВЛЕНИЕ:

Ну, я узнал, как исправить это в Windows, но я понял, что большая проблема связана с MAC.

В принципе, если я изменил float: оставил на элементе класс ни один или изменил шаблон id с "%" на "px", как показано ниже, я могу исправить эту проблему, но на MAC он ведет неправильное поведение.

.element { 
float: none; 
}

#template {
width: 1000px; 
}

Есть идеи?

  • 0
    Ах! Мои элементы плавают влево изначально. дело?
  • 0
    Ну, я понял, что проблема именно в свойстве float: left. Как только я найду решение, чтобы элементы были организованы без плавающей запятой: слева я выложу ответ.

1 ответ

0
Лучший ответ

Ну, на самом деле я пытался сделать худший путь.

Мой макет жидкий, поэтому все определяется с помощью "%". Когда я пытался переместить элементы, мне нужно было вычесть левую позицию, сохраненную для "ширины" элементов макета, которые расположены перед элементом, но проблема в том, что эти элементы макета могут изменить свою "ширину" в соответствии с настройкой поэтому разрешение также может повлиять на разрешение.

Мои элементы, которые должны быть перемещены, находятся внутри элемента DIV, определенного с помощью "px". Таким образом, этот способ намного проще. Я просто вынул из него "float: left" и получил позицию, как $.css("left").

Проблема заключалась в моем подходе. Теперь в основном я получаю и изменяю так:

Получить

$('#section > li:first()').find('.element:last()').css('left')

Переставьте

$('#section > li:first()').find('.element:last()').css('left', '536px');

Ещё вопросы

Сообщество Overcoder
Наверх
Меню