#html #css #css-float
#HTML #css #css-float
Вопрос:
Я новичок в мире кодирования, а также CSS, и заметил, что при изменении размера моего браузера все мои элементы с плавающей точкой перемещаются, скажем, вправо, и пользователь вынужден прокручивать по горизонтали, чтобы просмотреть, скажем, меню.
Во-первых, есть ли необходимость в том, чтобы элементы с плавающей запятой не меняли своего положения?
Во-вторых, есть ли способ избежать этого, если я должен предотвращать это?
Комментарии:
1. Инкапсулируйте свой макет в контейнер фиксированной ширины, чтобы он не менял размер при изменении размера окна, что предотвращает повторное заполнение макета.
2. Попробуйте установить divs, если таковые имеются, в абсолютное значение.
3. Несмотря на то, что работа продолжается (хотя и в значительной степени заброшена), это то, чего вы пытаетесь достичь? Просто переместите поля, а затем измените размер браузера. Редактировать: был создан для использования в Google Chrome.
4. @Shaz — Не совсем. Я пытаюсь понять, почему мои элементы с плавающей запятой смещаются / меняют позиции при изменении размера моего браузера и должен ли я поместить их a в фиксированный контейнер, как предложил Марк Б.
Ответ №1:
Плавающие значения — это заноза в заднице. В первую очередь из-за одного браузера, который отказывается следовать универсальным веб-стандартам. Да, этот.
Существует миллион и один прием, позволяющий избежать этих проблем. Я говорю своей команде выполнить эти шаги:
- Экономно используйте абсолютно позиционированные элементы. Если вы размещаете на основе другого элемента, все может «автоматически настраиваться», но не так сильно, когда все математически приклеено к одному месту. У них есть свое место, просто не на каждом элементе страницы.
- Рассмотрим «сброс» или макет CSS на основе сетки. Лично я предпочитаю сетки 960, они позволяют строить догадки из разных браузеров. Вытеснит ли IE ваше заполнение? Будет ли заполнение, специфичное для IE, слишком большим или слишком маленьким в Firefox? При сбросе и / или сетке это не так важно.
- При вычислении процентов (что лично мне очень нравится) помните, что браузер обычно не использует математику, где 1 1 = 2. То есть, если у вас есть пространство в 1000 пикселей и вы размещаете два столбца по 50% рядом, очень велика вероятность, что один из них окажется ниже другого. Почему? Потому что плавающие элементы, поля, границы и т.д. складываются, и все по-разному в разных браузерах. Итак, думайте, что .9 .9 = 2 при проектировании. Работает ли это постоянно? Нет. Но это только начало.
- Тестируйте, тестируйте, тестируйте. Такие вещи, как browsershots, Adobe Browser Labs и т.д., Являются вашими друзьями. Используйте их постоянно, чтобы убедиться, что вы создаете код хорошего качества, который выглядит согласованным на всех платформах.
- Сохраняйте простоту. Возможно, вы работаете над проектом, который диктует 100 различных таблиц стилей, охватывающих каждую версию каждого браузера. Большинство из нас работают над реальными проектами с реальными бюджетами…это означает, что вам нужно выполнить быстрое и эффективное развертывание. Используйте код, совместимый с w3, хорошего качества и качественный CSS, и вы сможете полностью избежать взломов.
Комментарии:
1. @bpeterson76 — Спасибо. Я знаю, что статьи и ответы могут быть субъективными, однако мне любопытно узнать, когда я буду использовать позиционированные элементы поверх элементов с плавающей точкой.
2. @bpeterson76 — Я просмотрел 960, однако не понимаю, как я могу его использовать. Загружаю ли я определенный шаблон? Например, я взглянул на grids.heroku.com однако я не уверен, как размеры столбцов и т.д. Влияют на мой макет
3. Сетки — довольно простая концепция. Нарисуйте сетку на своем экране… обычно используется 12 или 16 (но может быть больше или меньше) столбцов. Все должно вписываться в эти столбцы. В случае сетки 960 (шириной 960 пикселей) каждый столбец макета из 12 сеток будет иметь размер 80 пикселей. Хотите, чтобы что-то было шириной 160 пикселей? Тогда это элемент «grid_2» или шириной в два столбца. Существуют отличные генераторы, просто продумайте их, прежде чем начинать писать код.
4. @Peanuts, что касается элемента с абсолютным расположением, мое эмпирическое правило заключается в использовании только тогда, когда вам абсолютно необходима эта функциональность. Базовое позиционирование может быть выполнено с помощью относительного позиционирования в 99% случаев. Используйте плавающие элементы для элементов, которые должны располагаться поверх других (с помощью z-index help) или для элементов, которые расположены косо контейнера. Когда вам нужно изменить макет, относительно расположенные элементы передаются вместе со своими родителями, поэтому изменение не такое болезненное. С absolute вам нужно постоянно менять объявление top и left, и это может устареть очень быстро.
5. @bpeterson76 — Спасибо. Итак, когда вы говорите, что столбец имеет размер 80 пикселей, я предполагаю, что он имеет ширину 80 пикселей. То есть вы хотите сказать, что элементы должны умещаться шириной в 80 пикселей? Если да, то мне трудно представить, как я мог бы этого добиться.
Ответ №2:
Я бы посоветовал вам выяснить, хотите ли вы поддерживать разные разрешения, в зависимости от вашей целевой аудитории. Перемещение элементов не обязательно плохо, и может быть важно заранее спланировать, как вы хотите, чтобы ваш сайт располагался в зависимости от размера области просмотра.
Если вы не можете найти подходящий для ваших нужд «один макет, чтобы управлять ими всеми», взгляните на CSS media queries. Для более практической статьи о них попробуйте Список отдельно
Основная идея заключается в том, что, используя отдельные таблицы стилей, которые зависят от размера, вы можете в принципе отображать пользователю различный макет в зависимости от их области просмотра. Пользователи, изменяющие размер своих браузеров, также смогут видеть новый макет динамически.
Комментарии:
1. Мне любопытно ваше утверждение о том, что перемещение элементов не обязательно плохо. Почему это? Когда это не имеет значения?
2. Взгляните на статью об адаптивном дизайне, на которую я ссылался, принимая во внимание, что различные устройства, которые могут получать доступ к вашему сайту, могут быть важны. (Опять же, во многом зависит от вашей целевой аудитории, конечно :)).