Как расположить элемент слева css

Как лучше всего расположить div в CSS?

Я пытаюсь разместить это меню в левой части страницы:

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

5 ответов

Я часто сталкиваюсь с этой проблемой — и, пытаясь решить ее, я всегда задаюсь вопросом, не делаю ли я это неправильно. В a ‘div’ я хочу расположить изображение слева — и соответствующий текст справа — я бы хотел, чтобы они были вертикально центрированы. Как лучше всего это сделать? В настоящее.

У меня есть чат, который я построил в node js, HTML и CSS, и я добавляю сообщения в div и стилизую сообщения с помощью css, поэтому мой вопрос заключается в том, как лучше всего расположить эти элементы, такие как изображение профиля, имя, дата и сообщение вот мой текущий стиль я не чувствую себя.

float действительно является правильным свойством для достижения этой цели. Однако пример, приведенный bmatthews68, может быть улучшен. Самое главное в плавающих ящиках — это то, что они должны указывать явную ширину. Это может быть довольно неудобно, но именно так работает CSS. Однако обратите внимание, что px -это единица измерения, которой нет места в мире HTML/CSS,, по крайней мере, для указания ширины.

Всегда прибегайте к мерам, которые будут работать с разными размерами шрифта, то есть используйте либо em , либо % . Теперь, если меню реализовано в виде плавающего тела, то это означает, что основное содержимое плавает в нем. Если основное содержание выше, чем меню, это может быть не то, что вы хотите:

Вы можете исправить это поведение, придав основному содержимому значение margin-left , равное ширине меню:

В большинстве случаев вы также хотите дать основному контенту padding-left , чтобы он не слишком близко подходил к меню.

Кстати, тривиально изменить все вышесказанное так, чтобы меню находилось справа, а не слева: просто измените каждое вхождение слова “left” на “right”.

И последнее. Если содержимое меню выше, чем основное содержимое, оно будет отображаться странно, потому что float делает некоторые странные вещи. В этом случае вам придется очистить поле, которое находится ниже плавающего тела, как в Примере bmatthews68.

/EDIT: черт возьми, HTML работает не так, как показывал предварительный просмотр. Ну, вместо этого я включил фотографии.

Я думаю, что вы должны использовать свойство float для позиционирования подобных вещей. Вы можете прочитать об этом здесь.

Все ответы, говорящие об использовании поплавков (с явной шириной), верны. Но чтобы ответить на первоначальный вопрос, каков наилучший способ позиционирования a <div> ? Это зависит.

CSS является очень контекстуальным, и поток страницы зависит от структуры вашего HTML. Нормальный поток — это то, как элементы и их дочерние элементы будут располагаться сверху вниз (для блочных элементов) и слева направо (для встроенных элементов) внутри содержащего их блока (обычно родительского). Именно так должна работать большая часть вашего макета. Вы будете склонны полагаться на width , margin и padding , чтобы определить расстояние и расположение элементов вокруг него (будь то <div> , <ul> , <p> или иначе, HTML в основном семантичен на данный момент).

Использование таких стилей, как float , absolute или relative позиционирование, может помочь вам достичь очень конкретных целей вашего макета, но важно знать, как их использовать. Как уже было объяснено, float обычно используется для размещения блочных элементов рядом друг с другом, и это действительно хорошо для многоколоночных макетов.

Я не буду вдаваться здесь в подробности, но вы, возможно, захотите проверить следующее:

    -вероятно, самая простая и полная CSS ссылка, которую я нашел в интернете. -Да, это трудное чтение, но оно все объясняет.

У меня есть underlay.jpg в <div , на котором я хочу точно разместить маркеры. Как лучше всего это сделать? Я бы хотел, чтобы изображение заполняло пространство div и маркеры регулировались при изменении размера окна. Я предполагаю, что сделать это в CSS было бы проще всего, но я.

Проверьте эту ссылку . Я хочу расположить синий и черный div точно справа и внизу красного div соответственно. Я хочу, чтобы правая вершина синего div выровнялась с правой вершиной красного, а нижняя вершина черного div выровнялась с нижней вершиной красного. Как лучше всего это сделать? Заранее.

Вы должны использовать атрибуты float и clear CSS, чтобы получить желаемый эффект.

Сначала я определил стили для вызываемых левого и правого столбцов в моем макете и стиль под названием clearer, используемый для сброса потока страниц.

Затем я использую их для верстки своей страницы.

вы можете использовать float

Похожие вопросы:

В CSS я видел, как разные разработчики использовали различные методы для указания цветов, скажем, например, у меня есть DIV like <div </div> CSS .container <.

Как лучше всего указать позиции элементов в виджете GWT? Представьте, что у вас есть задача: разместить набор виджетов в макете страницы. Что бы вы использовали, чтобы расположить все ваши кнопки и.

Я хотел бы создать div с произвольным размером, а затем отобразить что-то поверх этого div. Как лучше всего расположить и размер наложения точно так же, как div ниже в css?

Я часто сталкиваюсь с этой проблемой — и, пытаясь решить ее, я всегда задаюсь вопросом, не делаю ли я это неправильно. В a ‘div’ я хочу расположить изображение слева — и соответствующий текст справа.

У меня есть чат, который я построил в node js, HTML и CSS, и я добавляю сообщения в div и стилизую сообщения с помощью css, поэтому мой вопрос заключается в том, как лучше всего расположить эти.

У меня есть underlay.jpg в <div , на котором я хочу точно разместить маркеры. Как лучше всего это сделать? Я бы хотел, чтобы изображение заполняло пространство div и маркеры.

Проверьте эту ссылку . Я хочу расположить синий и черный div точно справа и внизу красного div соответственно. Я хочу, чтобы правая вершина синего div выровнялась с правой вершиной красного, а.

Для клиента мне нужно собрать абсолютный div слева от тела, содержащего рекламу. Единственный способ, которым я понял, как это сделать до сих пор, — это создать абсолютный div. Проблема здесь в том.

Как лучше всего центрировать с помощью CSS? <div style=position: absolute; left: 50%;> <div style=position: relative; left: -50%> Centered content </div> </div> или просто.

По умолчанию, когда JTextField получает фокус, каретка располагается в начале текста. Однако я думаю, что лучше всего расположить его в конце или выделить весь текст, например.

background-position

При помощи свойства background-position можно управлять положением фоновой картинки внутри элемента.

Если фоновая картинка ( background-image ) меньше, чем элемент, и автоматическое повторение фона ( background-repeat ) отключено, то по умолчанию она расположится в левом верхнем углу.

Пример

Как видно в примере, маленькая картинка с персонажем располагается в левом верхнем углу. Но по логике это изображение нам нужно расположить в правом нижнем углу.

Для этого мы изменим значение свойства background-position на нужное нам: 100% 100% или bottom right . Они равнозначны.

Позиция в процентах:

Или при помощи ключевых слов:

Как это понять

Слово position переводится с английского языка как позиция или положение. Всё свойство дословно можно перевести как фон-позиция. Или, по-русски, позиция фона.

Свойство background-position позволяет управлять положением фонового изображения внутри блока.

Как пишется

Проценты

Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки. Сдвиг картинки на 50% , то есть на половину этой разницы, центрирует её по соответствующей оси. Значение 0% 0% ставит картинку в левый верхний угол, а 100% 100% — в правый нижний.

Правый нижний угол:

Слева 15%, сверху 5%:

Если развернуть запись 15% 5% подробнее, то станет понятнее, как работают проценты в этом случае:

  • Слева от картинки 15% свободного места, а справа — оставшиеся 85%.
  • Над картинкой 5% свободного места, а под ней — оставшиеся 95%.

Ключевые слова

Доступны слова center , bottom , left , right . Их можно комбинировать, например: left center — по центру левой стороны; right bottom — правый нижний угол. Если хотим расположить картинку по центру по горизонтали и вертикали, второе слово center можно опустить.

Левый верхний угол:

По центру по горизонтали и у нижнего края:

Пиксели или другие единицы измерения длины

Можно указать конкретное положение картинки в блоке.

10 px от левого края и 150 px от верхнего края:

1 rem от левого края и по центру между верхом и низом:

15 единиц ширины от левого края и 25 единиц высоты от верха:

Подсказки

&#128161; Свойство положения фона не наследуется.

&#128161; Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали.

&#128161; Значение по умолчанию — 0% 0% (левый верхний угол).

&#128161; Если указано только одно значение, то второе подставляется автоматически и равняется 50% . То есть значение 100% расположит картинку по центру правого края.

&#128161; Если картинка больше блока, то разница их размеров, от которой отсчитываются проценты, оказывается отрицательной, поэтому они сдвигают картинку не вправо и вниз, а влево и вверх. Но 50% 50% и в этом случае совмещает центр картинки с центром элемента, а 100% 100% — правый нижний угол картинки с правым нижним углом элемента.

&#128161; Если картинка занимает всё пространство блока, то background-position с ключевыми словами или в процентах не возымеет никакого действия (проценты будут отсчитываться от нуля). Но его принято указывать, чтобы в случае замены картинки новое изображение располагалось по центру блока.

&#128161; Изменение положения фона можно анимировать при помощи свойства transition &#129395;

На практике

Алёна Батицкая

&#128736; В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов стоит указывать background-position: center или background-position: 50% 50% — в качестве подстраховки от фатальной поломки вёрстки.

&#128736; Можно встретить такую запись: background-position: right 20px bottom 10px; . В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в двадцати пикселях от правого края и в десяти пикселях от нижнего края.

&#128736; Помимо перечисленных вариантов можно использовать функцию calc() для указания более гибкого значения.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *