, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег

Горизонтальные линейки - тег <НR>

Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид. Попробуйте поэкспериментировать с тегом <НR>, и вы получите линии, совсем не похожие на те, которыми обычно пользуетесь.

Преформатированный вывод - тег <РRЕ>

Применение этого тега позволяет отобразить текст «как есть» (без форматирования), теми же символами и с тем же разбиением на строки.

Применение тега

Текст, помещенный между тегами и , мерцает. Данный тег поддерживается только браузером Netscape Navigator. Пользоваться им следует с большой осторожностью.

w3 css (17)

Учитывая следующий HTML:

Я бы хотел, чтобы #copyright придерживался нижней части #container .

Могу ли я достичь этого, не используя абсолютное позиционирование? Если свойство float поддерживает значение «bottom», похоже, что это будет трюк, но, к сожалению, этого не происходит.

HTML:

CSS:

В CSS ничего не называется float:bottom . Лучше всего использовать позиционирование в таких случаях:

Position:absolute; bottom:0;

Для них есть только один ребенок в контейнере, вы можете использовать подход table-cell и vertical-align который надежно работал для позиционирования одного div внизу его родителя.

Обратите внимание, что использование table-footer-group качестве других упомянутых ответов приведет к нарушению расчета высоты родительской table .

#container { display: table; width: 100%; height: 200px; } #item { display: table-cell; vertical-align: bottom; }

Если вы хотите, чтобы он «прилипал» к низу, независимо от высоты контейнера, то абсолютное позиционирование - это путь. Конечно, если элемент авторского права является последним в контейнере, он всегда будет внизу.

Можете ли вы расширить свой вопрос? Объясните, что именно вы пытаетесь сделать (и почему вы не хотите использовать абсолютное позиционирование)?

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

Чистый CSS, без абсолютного позиционирования, без фиксации любой высоты, кросс-браузер (IE9 +)

Поскольку обычный поток «сверху вниз», мы не можем просто просить #copyright div придерживаться нижней части своего родителя без какого-либо позиционирования какого-то рода. Но если мы хотели, чтобы #copyright div придерживался вершины его родитель, это будет очень просто - потому что это нормальный поток.

Поэтому мы будем использовать это в наших интересах. мы изменим порядок div s в HTML, теперь #copyright div находится вверху, а содержимое сразу же следует за ним. мы также делаем контент div растянутым полностью (используя псевдоэлементы и методы очистки)

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

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

Если мы хотим иметь scroolbar в области содержимого, нам нужно применить немного больше магии CSS. как можно показать [в этом примере содержимое находится ниже заголовка, но его та же идея]

* { margin: 0; padding: 0; } html, body, #Container { height: 100%; color: white; } #Container:before { content: ""; height: 100%; float: left; } #Copyright { background-color: green; } #Stretch { background-color: blue; } #Stretch:after { content: ""; display: block; clear: both; } #Container, #Container>div { -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotate(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }

Фактически, принятый ответ @User будет работать только в том случае, если окно высока, а контент короткий. Но если контент высок, а окно короткое, оно поместит информацию об авторских правах на содержимое страницы, а затем прокручивается вниз, чтобы увидеть содержимое, оставив вас с плавающим уведомлением об авторских правах. Это делает это решение бесполезным для большинства страниц (например, эта страница).

Наиболее распространенный способ сделать это - продемонстрированный подход «CSS липкий нижний колонтитул» или немного более тонкое изменение. Этот подход отлично работает - если у вас есть фиксированный верхний нижний колонтитул.

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

Проглотите свою гордость и используйте стол.

Например:

* { padding: 0; margin: 0; } html, body { height: 100%; } #container { height: 100%; border-collapse: collapse; }

Попробуйте. Это будет работать для любого размера окна, для любого количества контента для любого нижнего колонтитула любого браузера... даже IE6.

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

Таблицы не круты, но по крайней мере на данный момент они иногда являются лучшим способом решения проблемы дизайна.

Если вы не знаете высоту дочернего блока:

#parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;} .child{background:red;vertical-align:bottom;}

Если вы знаете, что высота дочернего блока добавляет дочерний блок, добавьте padding-top / margin-top:

#parent{background:green;width:200px;height:130px;padding-top:70px;} .child{background:red;vertical-align:bottom;height:130px;}

Parent { display: flex; flex-direction: column; } .child { margin-top: auto; }

Parent { height: 100px; border: 5px solid #000; display: flex; flex-direction: column; } .child { height: 40px; width: 100%; background: #f00; margin-top: auto; }

Решение выше, вероятно, более гибкое, однако, это альтернативное решение:

Parent { display: flex; } .child { align-self: flex-end; }

Parent { height: 100px; border: 5px solid #000; display: flex; } .child { height: 40px; width: 100%; background: #f00; align-self: flex-end; }

В качестве дополнительной заметки вы можете добавить префиксы поставщиков для дополнительной поддержки.

Кроме того, если есть положения с использованием position:absolute; или position:relative; , вы всегда можете попробовать padding родительский div или поместить margin-top:x; , В большинстве случаев это не очень хороший метод, но в некоторых случаях он может пригодиться.

Просто потому, что это вообще не упоминалось, что обычно хорошо работает в таких ситуациях, как ваше:

Вам нужно было бы форматировать div-copyright, аналогично другому контейнеру (такая же общая ширина, центровка и т. Д.), И все в порядке.

Единственный раз, когда это может быть не идеальным, - это когда ваш контейнер-div объявлен с height:100% , и пользователю потребуется прокрутить вниз, чтобы увидеть авторское право. Но даже вы можете работать (например, margin-top:-20px - когда высота вашего элемента авторского права составляет 20 пикселей).

• Абсолютное позиционирование
• Нет табличного макета
• Никаких сумасшедших css, которые выглядят по-разному в каждом другом браузере (ну, по крайней мере, IE, вы знаете)
• Простое и четкое форматирование

Кроме того: я знаю, что OP попросил решение, которое «... прилипает к дну« контейнера »div ...» , а не что-то под ним, но давайте, люди ищут хорошие решения здесь, и это это один!

Div of style, position:absolute;bottom:5px;width:100%; работает, но для этого потребовалась более ситуация с прокруткой.

Window.onscroll = function() { var v = document.getElementById("copyright"); v.style.position = "fixed"; v.style.bottom = "5px"; }

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

Мне нужно было создать навигационную панель, которая имела бы фактические ссылки в правом нижнем углу и случайные элементы брата, при этом гарантируя, что сам бар растягивается должным образом, не нарушая макет. Я использовал элемент «shadow», чтобы занять пространство ссылок на панели навигации и добавил его в конце дочерних узлов контейнера.

#container{width:100%; float:left; position:relative;} #copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;} #container{background:gray; height:100px;}

Попробуй это;

Создайте еще один контейнер div для элементов выше #copyright . Только над авторским правом добавьте новый div:

Да, вы можете сделать это без absolute позиционирования и без использования table s (которая винт с разметкой и т. Д.).

DEMO
Это проверено для работы с IE> 7, chrome, FF и является очень простой возможностью добавить к существующему макету.

Он эффективно делает то, что float:bottom , даже учитывая проблему, указанную в ответе @Rick Reilly!

Использование свойства translateY и top

Просто установите дочерний элемент на позицию: относительный и перемещайте его вверх: 100% (это высота 100% родителя) и придерживайтесь нижней части родительского объекта путем преобразования: translateY (-100%) (это -100% высоты ребенок).

• вы не берете элемент из потока страницы
• он динамичен

Но все же просто обходной путь:(

Copyright{ position: relative; top: 100%; transform: translateY(-100%); }

Не забывайте префиксы для более старого браузера.

Влад Мержевич

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры