Главная » Языки программирования

Css div в dive

Содержание
  1. Как наложить один div на другой div
  2. 7 ответов
  3. Проблема
  4. Предложенное решение
  5. Обязательные знания CSS
  6. Решение
  7. Результат
  8. Альтернативное (без обертки) решение
  9. divы в dive посередине
  10. Div в div’e
  11. div в div’e
  12. Решение
  13. CSS Div center of another Div
  14. Syntax
  15. output
  16. A simple Div
  17. How to contain one div inside another
  18. Positioning a div inside another div
  19. output
  20. First Div
  21. Second Div
  22. CSS Div side by side
  23. output
  24. First Div
  25. Second Div
  26. CSS float
  27. output
  28. First Div
  29. Second Div
  30. Div position relative to parent
  31. Center a Div within another Div
  32. Source Code
  33. Div top center
  34. Source Code
  35. Div bottom center

Как наложить один div на другой div

Надеясь, что кто-то может помочь, но мне нужна помощь с наложением одного человека div на другого человека div . Мой код выглядит следующим образом:

К сожалению, я не могу вложить div#infoi или img внутри первого div.navi . Это должно быть два отдельных div , как показано на рисунке, но мне нужно знать, как я мог бы разместить div#infoi по div.navi и справа в самой стороне и по центру сверху div.navi . Поблагодарите любую помощь в достижении этого.

7 ответов

#container < width: 100px; height: 100px; position: relative; >#navi, #infoi < width: 100%; height: 100%; position: absolute; top: 0; left: 0; >#infoi
 
a
 
 b

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

@tonsils: инструкции alex должны дать желаемый результат, поэтому должно быть что-то еще, что вызывает проблему, которую вы описываете. Не могли бы вы предоставить нам образец кода (HTML + CSS), чтобы мы могли вам помочь?

Читайте также:  Java classes in tomcat

absolute позиционированные элементы позиционируются относительно их ближайшего явно позиционированного ( position:absolute|relative|fixed ) родительского элемента. просто дальнейшие разъяснения . jsfiddle.net/p5jkc8gz

В зависимости от случая это может быть адаптировано. В моей ситуации мне не нужно, чтобы #navi был top: 0 left: 0, и в общем случае, если у вас есть HTML-код, он будет находиться до тех пор, пока HTML-дерево анализируется. Так что, возможно, в этом случае это определение не является необходимым.

@ Ответ BrettDeWoody в ниже намного превосходит этот: Это не только гораздо более тщательно детализированы, в том числе , как и зачем это делать, но его ответ также позиционирует накладку в верхнем правом углу , как просил ОП — что этот ответ не делать. Голосуй за ответ Бретта, а не этот!

Принятое решение отлично работает, но у ИМО нет объяснений, почему он работает. Приведенный ниже пример сводится к основам и отделяет важный CSS от неулокального стиля CSS. В качестве бонуса я также включил подробное объяснение того, как работает позиционирование CSS.

TL;DR; если вы хотите только код, прокрутите вниз до «Результат».

Проблема

Есть два отдельных элемента: sibling, elements, и цель состоит в том, чтобы позиционировать второй элемент (с id infoi ), чтобы он отображался в предыдущем элементе (тот, у которого был class navi ). Структура HTML не может быть изменена.

Предложенное решение

Для достижения желаемого результата мы будем перемещать или позиционировать второй элемент, который мы будем называть #infoi чтобы он отображался в 1-м элементе, который мы будем называть .navi . В частности, мы хотим, чтобы #infoi располагался в верхнем правом углу .navi .

Обязательные знания CSS

CSS имеет несколько свойств для позиционирования элементов. По умолчанию все элементы имеют position: static . Это означает, что элемент будет располагаться в соответствии с его порядком в структуре HTML, за некоторыми исключениями.

Другие значения position являются relative , absolute и fixed . Установив position элемента для одного из этих 3 значений, теперь можно использовать комбинацию из следующих 4 свойств для позиционирования элемента:

Другими словами, установив position: absolute , мы можем добавить top: 100px чтобы поместить элемент 100px из верхней части страницы. И наоборот, если мы установим bottom: 100px элемент будет располагаться на 100px в нижней части страницы.

Здесь, где многие новички CSS теряются — position: absolute имеет систему отсчета. В приведенном выше примере, система отсчета является body элемента. position: absolute с top: 100px означает, что элемент расположен на 100px от верхней части элемента body .

Позиционный кадр ссылки или контекст позиции можно изменить, установив position родительского элемента на любое значение, отличное от position: static . То есть мы можем создать новый контекст позиции, предоставив родительский элемент:

Например, если элементу задана position: relative , любые дочерние элементы используют качестве своего контекста позиции. Если дочернему элементу задана position: absolute и top: 100px , элемент будет располагаться 100px от вершины элемента , потому что теперь является контекстом позиции,

Другим фактором, о котором следует знать, является порядок стека — или как элементы сложены в z-направлении. Обязательным знанием здесь является порядок стека элементов по умолчанию, определяемый обратным порядком в структуре HTML. Рассмотрим следующий пример:

В этом примере, если два элемента

были размещены в одном и том же месте на странице, элемент
Top

будет охватывать элемент

Bottom

. Поскольку

Top

появляется после

Bottom

в структуре HTML, он имеет более высокий порядок стекирования.

Порядок укладки может быть изменен с помощью CSS с использованием свойств z-index или order .

Мы можем игнорировать порядок укладки в этой проблеме, поскольку естественная структура HTML элементов означает, что элемент, который мы хотим отображать top приходит после другого элемента.

Итак, вернемся к проблеме — мы будем использовать контекст позиции для решения этой проблемы.

Решение

Как указано выше, наша цель — позиционировать элемент #infoi чтобы он отображался в элементе .navi . Для этого мы #infoi элементы .navi и #infoi в новый элемент чтобы мы могли создать новый контекст позиции.

Затем создайте новый контекст позиции, .wrapper position: relative .

С этим новым контекстом позиции мы можем позиционировать #infoi внутри .wrapper . Сначала дайте #infoi position: absolute , позволяющую нам позиционировать #infoi абсолютно в .wrapper .

Затем добавьте top: 0 и right: 0 чтобы #infoi элемент #infoi в верхнем правом углу. Помните, поскольку элемент #infoi использует .wrapper качестве своего контекста позиции, он будет находиться в правом .wrapper элемента .wrapper .

Поскольку .wrapper — это просто контейнер для .navi , позиционирование #infoi в верхнем правом углу .wrapper дает эффект размещения в верхнем правом углу .navi .

И там у нас это, #infoi теперь находится в верхнем правом углу .navi .

Результат

Пример ниже сводится к основам и содержит некоторые минимальные стили.

/* * position: relative gives a new position context */ .wrapper < position: relative; >/* * The .navi properties are for styling only * These properties can be changed or removed */ .navi < background-color: #eaeaea; height: 40px; >/* * Position the #infoi element in the top-right * of the .wrapper element */ #infoi < position: absolute; top: 0; right: 0; /* * Styling only, the below can be changed or removed * depending on your use case */ height: 20px; padding: 10px 10px; >

Альтернативное (без обертки) решение

В случае, если мы не можем редактировать любой HTML, то есть мы не можем добавить элемент оболочки, мы все равно можем добиться желаемого эффекта.

Вместо использования position: absolute в элементе #infoi , мы будем использовать position: relative . Это позволяет нам переместить элемент #infoi из его позиции по умолчанию под элементом .navi . С position: relative мы можем использовать отрицательное top значение, чтобы переместить его из его позиции по умолчанию, а left значение 100% минус несколько пикселей, используя left: calc(100% — 52px) , чтобы расположить его рядом с правой кнопкой мыши, боковая сторона.

/* * The .navi properties are for styling only * These properties can be changed or removed */ .navi < background-color: #eaeaea; height: 40px; width: 100%; >/* * Position the #infoi element in the top-right * of the .wrapper element */ #infoi < position: relative; display: inline-block; top: -40px; left: calc(100% - 52px); /* * Styling only, the below can be changed or removed * depending on your use case */ height: 20px; padding: 10px 10px; >

Источник

divы в dive посередине

albums — 1000px, album — 150px. Надо чтобы дивы «album» были в середине родительского div’a, по 5 в ряд. При float: left они встают в ряд, но центрируются по левому краю. Без float — выводятся по 1 в ряд.
Как это сделать? Заранее спасибо!

Стиль в DIVe и вне его
Изучаю верстку Демо типовой CMS и не могу понять такую вещь: некоторые стили указываются сами по.

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

hdd и hp 3d dive guard
купил недавно ноут hp pavilion g6. периодически ( иногда раз в день — иногда раз в час ) слышны.

Блоки посередине
Есть такой код: <!DOCTYPE html PUBLIC "-//W3//DTD XHTML 1.0 Transitional//EN".

.albums {text-align:center;} .albums .album {display:inline-block;}

Но в IE7 и ниже это не будет работать, ибо он умеет делать inline-block’ами только тех, кто по умолчанию inline. Если заменить, например, на span’ы, тогда и там заработает: 

div id="albums"> span class="album">. /span> span class="album">. /span> span class="album">. /span> span class="album">. /span> span class="album">. /span> /div>
div id="albums">span class="album">. /span>span class="album">. /span>/div>

Источник

Div в div’e

Блоки (1) и (2) находятся один под одним, в блок (2) входят два блока: (3) и (4). В свою очередь в блоки (3) и (4) входят еще одна «конструкция». (по сути, в 3м и 4м блоке будет одно и тоже, только с разной шириной.

В общем, все это я пытаюсь сделать следующим образом: (4го блока тут нет, ибо даже не пытался сделать, без нормального 3го)

/* блок (1) */
 
/* Блок (2) */

 
/* Блок 3 */


тест тест
2

тест тест тест

div.center-menu
div.center-body
div.left-menu

Когда я не использую div под своим номером (3), а просто делаю так:

/* блок (1) */

/* Блок (2) */

тест тест
2

тест тест тест

То все норм отображается, но как только загоняю те дивы со стайлами в , то имею следующий результат

В чем ошибка, что подправить, чтобы они нормально отображались?

Изменено 13 марта 2010 пользователем Eudelis

Источник

div в div’e

В 1 диве находится 2 див. Как сделать чтобы 2 div отступал от стенок 1 дива на, допустим, 5px?
Если делаю у 2div margin: 5px; то 1div тоже отодвигается на 5рх.
если у 1div делаю padding: 5px; то 1div увеличивает свой размер (а это недопустимо, у меня 1div width 100%)
Кто что подскажет?)

divы в dive посередине
Есть примерно такой код: <div <div <div.

Стиль в DIVe и вне его
Изучаю верстку Демо типовой CMS и не могу понять такую вещь: некоторые стили указываются сами по.

CSS!? Div в div’e, как не потерять позиции css внутреннего div’a при изменении размера браузера?
вот когда изменяю размер браузера, то внутренний div не хочет изменяться вместе с контейнером, а.

перекрывает 2 других . Не отображается
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN".

Лучший ответ

Сообщение было отмечено Risk07 как решение

Решение

Если див не абсолютно позиционируемый ему можно не указывать ширину в 100%, она уже и так 100%

Пример отображается нормально 

div style=" background-color: #ccc; padding: 10px;"> div style="background-color: #666;"> br />br />br />br />br />/div> /div>

Резиновый размер div’a, размер div’a в зависимости от расположения div’ов в нем
Надо чтобы div "telo" растягивался в зависимости от дивов которые находятся в нем. тоесть должен.

тег div должен спускаться вниз с родным div, не получается, подскажите
есть два div-a, один родной а второй внутри его, мне нужно, чтобы при пополнений внутреннего div-a.

Как наложить один DIV на другой DIV (чтобы он был по центру)
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу).

Растянуть div в высоту на 100% или на занимаемое пространство вложенного div
Ситуация такая, есть див-1, в нем несколько дивов. Див-1 осуществляет роль фоновой картинки(т.е.

Источник

CSS Div center of another Div

CSS Div (division) is a container element and it is used to group related items together. The use of div tag is straightforward.

Syntax

output

A simple Div

How to contain one div inside another

In some situations, we have to place one or more Div inside another Div.

Positioning a div inside another div

output

First Div

Second Div

In the above output, you can see the Div place up and down because CSS Div is a block element that forces a line break before and after the element. In some situation you have to place these Div side by side.

CSS Div side by side

CSS float property enables you to take an element out of normal flow and put content side-by-side. The following example shows how place Div side by side in an HTML page.

output

First Div

Second Div

In the above output you can see the Divs are placed side by side. Here second Div placed next to the first Div because we set the second Div float:left;. Float property accepts keyword values left and right float elements those directions respectively and set to none for not floated. If you want to place these Divs left side and right side of your screen, you should specify second Div float:right;

CSS float

output

First Div

Second Div

Div position relative to parent

Center a Div within another Div

In some situation you may have to position one Div exactly at the center of another Div. That means position Div center horizontally and Div center vertically inside of another Div.

Source Code

Div top center

Following program position Div at the top center of parent Div

Source Code

Div bottom center

Following program position Div at the bottom of parent Div

Источник

Оцените статью
© 2024 Программирование