Содержание
- Как выровнять текст по ширине
- Как выровнять меню по ширине
- Как выровнять картинки по ширине
- Как равномерно распределить блоки, если сайт резиновый
- 5 ответов 5
Как выровнять текст по ширине
Что значит выровнять текст по ширине? Это значит, что он будет прижат к обоим сторонам, его края слева и справа будут ровными. Чтобы браузер не растягивал пробелы, отчего текст становится плохо читаемым, нужно настроить перенос слов. Реализуется он очень просто с помощью того же CSS. Даже дефисы при необходимости ставятся с соблюдением правил русского языка.
Как выровнять меню по ширине
Обратили внимание, что текст на последней строке не растягивается по всей ширине? А если строка всего одна, то она и будет последней. Вот тут и пригодиться свойство text-align-last. Оно управляет только поведением крайней строки абзаца.
Поддержка браузерами ограничена, но можно немного пошаманить:
Как выровнять картинки по ширине
Как равномерно распределить блоки, если сайт резиновый
Вот возможности, которые предоставляют float: left; и display: table;. В данном примере если блоки не помещаются, то переходят на новую строку. flexbox всё же предоставляет больше возможностей.
По умолчанию текст на веб-страницах выровнен по левому краю элемента, в котором он располагается, однако используя свойство text-align, можно переопределить, как будут выравниваться строки текста относительно границ элемента. Рассмотрим каждое из возможных значений:
- left — выравнивает текст по левому краю.
- right — выравнивает текст по правому краю.
- center — выравнивает текст по центру.
- justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.
Попробовать »
Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.
Здравствуйте, уважаемые знатоки верстки! Подскажите плиз кроссбраузерное решение задания ширины div по содержимому дочерних элементов. Т.е. имеется, например
Как установить ширину l0_b1 == ширине l1_s1 ?
ПС. Очень желательно без js-хаков.
5 ответов 5
Как уже было сказано либо inline-block либо inline, если div-ву нужны блочные свойства,то display: inline-block; , но в этом случае необходимо задавать еще vertical-align: top; что-бы блок не съезжал вниз при добавлении контента. А вообще сами можете потренироваться, почти в каждом браузере есть отладчик для разработчиков, в FireFox пишите атрибут и по очереди прокликиваете все значения, этот вариант просто незаменим для новичков, можно наглядно всё увидеть, как элементы ведут себя.
Эту задачу можно решить несколькими способами:
1 — С помощью display: inline-block; :
2 — С помощью display: block; :
Используя float , не забывайте про clear: both
3 — С помощью display: inline-flex; :
4 — С помощью display: table; :
И блоки, и флексы, и таблицы могут оборачивать блок по его ширине. В зависимости от вашей общей задачи, вы можете выбрать самый подходящий вам вариант.
Источник:
