Различные расположения div на разных размерах экрана

Я пытаюсь написать персональный сайт, и я тестирую свой веб-сайт на экране ноутбука 1366x768, но также прилагается к нему монитор 1920x1080. Макет моих divs отлично смотрится на ноутбуке, но когда я перемещаю веб-сайт на монитор, один из тегов div любит двигаться немного (что странно, потому что другие выглядят прекрасно.Различные расположения div на разных размерах экрана

Вот изображение проиллюстрировать мою проблему:

enter image description here

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

Это мой CSS для DIV:

nav{ 

    position: absolute; 
    top: 60%; 
    margin-left: 40%; 
    margin-right: 20%; 
    border: solid; 

}

Моя логика здесь в том, что если я использую проценты для моего позиционирования, то DIV будет адаптироваться к различным размерам экрана и оставаться фиксированной в том же положении, но это Безразлично» Кажется, это так. Любые идеи о том, как исправить это, будут очень признательны.

источник

2014-09-12 Lukasz Medza

Есть ли родительский div с определенной шириной? – theMarceloR

Нет, все это состоит из двух разделов, один для части с текстом и навигация, который является отдельным. –

Это ожидаемое поведение для абсолютно позиционированных элементов с% поля. 20% слева на 1336 - это другое число, чем 1920. Я бы предложил НЕ позиционировать его абсолютно. Вместо этого используйте жесткий блок и используйте поля – briansol

Поместите навигатор в тот же div, что и логотип (скажем, класс .container).

.container { position:relative; }

Теперь просто поместите навигатор относительно контейнера. Он должен быть там по любой резолюции.

источник

2014-09-12 13:45:59

Извините за мой ужасный английский, я буду практиковать (я надеюсь, что понял ваш запрос)

Если вы хотите использовать АБСОЛЮТНУЮ ПОЗИЦИИ, вы должны попробовать это: Вставьте СЧА в текстовый контейнер, а затем использовать это css

nav { 
    position: absolute; 
    top: "your percentage"; 
    left:0; 
    right:0; 
    margin:0 auto; 
    border: solid; 
}

Таким образом, вы всегда в центре коробки (в соответствии с родительским контейнером).

источник

2014-09-12 13:49:16

Различные расположения div на разных размерах экрана

ответ

Смежные вопросы