Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 81
Спасибо! пригодится :)
на margin-right: -100% основывается способ Чикуенка по верстке растягивающихся сайтов. Хотя все наверное уже читали.
И по данному примеру хочется спросить: выравнивание должно работать относительно содержащего контейнера или относительно контейнера right. В ФФ в Мак оси работает относительно right.
И по данному примеру хочется спросить: выравнивание должно работать относительно содержащего контейнера или относительно контейнера right. В ФФ в Мак оси работает относительно right.
раз уж у нас размеры фиксированны, то что мешает заюзать bottom:0?
Честно говоря не совсем понял, о чём вы? Кому прописать bottom: 0? И про какие размеры вы говорите?
.ritght { position: absolute; right: 0; bottom: 0; width: 200px; height: 100px }
И что получится? В данном примере блок right тогда окажется в нижнем правом углу (если конечно блоку wrap ещё задать position: relative). А чего-то, честно говоря, всё равно не понимаю в чём суть.))
bottom: 300px и будет как у тебя в примере
Так в том-то и дело, что при position: absolute каждый раз придется подгонять значения top, bottom. А при моём способе всё будет происходить автоматически. Блоки не обязательно должны быть фиксированными по высоте. Высота спокойно может зависить от объёма контента. Плюс я сейчас постоянно сталкиваюсь с тем, что в конторе, в которой я работаю, дизайнеры любят по ходу вносить кучу исправлений: изменить размер шрифта, изменить высоту блока, решить, что они хотя блоки выровнять не по нижней линии, а по центру и т. д. И данный способ позволяет это всё делать быстро и безболезненно. Т.е. он гораздо более гибкий чем float или position: absolute.
Да-да! Тоже подумалось. Родительскому элементу присвоить position:relative, а двум другим position:absolute, а потом позиционировать всласть свойствами left, top или bottom, right.
Перебрал в уме все свои прошлые проекты и ни в одном из них не возникало такой необходимости.
Если не секрет, где Вы это использовали?
Если не секрет, где Вы это использовали?
Посмотрите, как оформлены комментарии на хабре: слева аватар, ник и дата, справа — оценка. Всё это в одной строке по разным краям.
Просто я хотел показать, где это можно использовать: строка постоянной высоты, блоки никогда не достигнут ширины больше половины строки.
Хотя мне тоже больше нравится float.
Хотя мне тоже больше нравится float.
прикол в том, что используя float вы можете выровнять блоки только по верхней линии. Чтобы выровнять их по нижней границе или по центру, вам придется каждый раз подгонять значения margin-top или top. А если высота блоков будет зависить от контента, то вообще ничего не получиться.
блоки никогда не достигнут ширины больше половины строкиДалеко ходить не пришлось:
Тут сверстано совершенно не так. Используются элементы списка обтекающие друг друга слева.
Я просто оставлю это здесь: jsfiddle.net/h9YMP/
ваш способ не будет работать в IE6-7 для блочных элементов
Обновил jsfiddle.net/h9YMP/69/ теперь работает.
Ключевые моменты:
1. ins вместо div т.к. ins по-умолчанию может быть и блочным (содержать другие блочные) и строчным (это надо чтоб в IE < 8 работал нативный display:inline-block;)
2. Убрать переводы строк внутри ins (нужно только для IE6).
Ключевые моменты:
1. ins вместо div т.к. ins по-умолчанию может быть и блочным (содержать другие блочные) и строчным (это надо чтоб в IE < 8 работал нативный display:inline-block;)
2. Убрать переводы строк внутри ins (нужно только для IE6).
И с чем же связана такая избирательность?
В названии класса необходимо отражать не внешний вид элемента, а его назначение
а если ег назначение — внешний вид? ;-)
Всегда есть что-то, что можно придумать. Например жёлтые декорационные «листочки» я называл стикер, а не йелоу шит : D
смысла не прибавилось. что если бы у тебя были разбросаны декорационные листочки разных цветов. как бы ты их назвал? стикер_основной, стикер_дополнительный, стикер_ещё_один? х)
А какое у них назначение? Или просто так разных цветов без всякого принципа? Тогда впринципе сойдёт просто нумерация, думаю
декорация. и когда тебе скажут подвинь жёлтый листочек в сторону ты полезешь в фаербаг смотреть номер класса вместо того, чтобы просто отредактировать правило для еллоу_шит?
декорация. и когда тебе скажут подвинь жёлтый листочек в сторону ты полезешь в фаербаг смотреть номер класса вместо того, чтобы просто отредактировать правило для еллоу_шит?
Я на самом деле тоже не согласен. К примеру у меня есть тридцать таблиц. У них весь контент выровнен по левому краю, а в последнем столбце каждой таблицы по правому. Последний столбец в каждой таблице называется по-разному. В одной — «статус», в другой — «расход», в третей «Кол-во просмотров» и т. д. Так я лучше присвою последнему столбцу класс last. Чем буду для каждого последнего столбца создавать новый класс, отражающий его контент.
Только не надо говорить: td:last-child, а для IE экспрешен. На таком количестве элементов IE сдохнет.
Обычная инлайн-блочная вёрстка. На tjkdesign.com про это было написано года 2-3 назад наверное, если не раньше.
Ну и да, увлекаться инлайн-блоками не стоит (в плане глобальной разметки), т.к. это довольно нестабильная модель отображения.
В том-то и дело, что макеты на инлайн-блоках никто делать не предлагает. В данной статье решается совершенно конкретная задача. Также как и здесь, например.
еще вариант — display: inline-block + text-align: justify (придется юзать лишний вспомогательный элемент)
впрочем, про этот способ выравнивания по краям не раз писали на хабре.
впрочем, про этот способ выравнивания по краям не раз писали на хабре.
Не могли бы вы мне дать ссылку на какой-нибудь из этих топиков? Реализация, которую я нашёл в интернете, некорректно работает в хроме. Вот ссылка.
Вот выше есть комментарий со ссылкой. Кстати, я всегда пользовался подобным способом, и глюков в Хроме не замечал. Можете рассказать о глюке поподробнее?
лично реализовывал этот способ в футере
под хромом тоже все ок
ссылки сходу не дам, помню сам не сразу нашел статьи на эту тему, тяжело подбирались ключевые слова) просто посмотри, как у меня сделано и скопипасть.
под хромом тоже все ок
ссылки сходу не дам, помню сам не сразу нашел статьи на эту тему, тяжело подбирались ключевые слова) просто посмотри, как у меня сделано и скопипасть.
Я понял, почему глючило в хроме. В той реализации, которую я нашёл, человек использовал свойство content, для эмуляции последней строки. Ну чтобы дополнительный div не вставлять. И это везде отлично прокатывает, кроме хрома. Хром почему-то не воспринимает эту строку как последнюю в блоке текста.
А так да, этот способ чудо как хорош. Минус только в дополнительном диве. Но очень большой плюс в том, что блоки при перекрытии будут прыгать друг под друга.
А так да, этот способ чудо как хорош. Минус только в дополнительном диве. Но очень большой плюс в том, что блоки при перекрытии будут прыгать друг под друга.
Кстати, как заметили выше, этот способ не будет работать в IE6, IE7. Точнее он будет работать, но только для инлайновых элементов, а для блочных — увы.
Конечно это на самом деле может работать, но всё немного сложнее
и каким образом, учитывая, что в IE6-7 единственный способ эмулировать inline-block — это поставить блочному элементу display: inline, zoom:1, но для таких элементов justify работать не будет?
Вы наверное замечали, что инлайн элемент с hasLayout не совсем инлайн-блочный, он слишком блочный — это может навести на некоторые мысли ; ) если не догадаетесь, то дождитесь моего поста об этом, на этой неделе опубликую
вы намекаете на то, что для IE нужно выставлять просто inline? Ну хотя ладно не буду гадать, дождусь поста.)
Как обещал (почти как обещал, получилось написать только сейчас): habrahabr.ru/blogs/css/81611/
спасибо, очень интересно. то есть второй элемент налезает на первый изза отрицательного маргина первого, а зачем тогда правому маргин отрицательный?
Оба блока (right и left) желательно записывать в одну строку, иначе из-за символа переноса строки правый блок будет чуть-чуть вылезать за границы блока-родителя.
Достаточно прописать для родителя блоков word-spacing: -1ex; или эквивалентное значение -.3em, и описаной проблемы не будет.
К сожалению способ не универсален. Например при значении font-family: verdana или monospace, парамметр word-spacing придется менять. Уверен, что есть и другие ситуации, где этот способ даст сбой. Например на других платформах.
Назначить стиль для родителя — одна строка, переназначить его для детей — ещё одна. За то не придется городить код в одну строку. По поводу других платформ — это уже нужно проверять.
Пример писал выше: verdana или monospace
Предлагаю более универсальный способ выравнивания элементов. К сожалению моей кармы, не хватает, чтобы написать полноценный пост с описанием, поэтому просто дам ссылку на пример. Кому интересно сам разберется, как и что работает.
Вы уже не первый, кто предлагает этот способ. Но чтобы этот способ заработал в IE6-7 для блочных элементов, нужно дико извращаться с элементом ins: http://habrahabr.ru/blogs/css/102651/#comment_3204337
А, нет, сорри, был не прав. Офигенно на самом деле. text-justify: center))) вот никогда бы не додумался. Благодаря ему всё работает. Круто. Спасибо.
тьфу, text-justify: newspaper))
Кстати, можете объяснить почему ваша реализация этого способа работает в хроме, а вот эта, которая вроде как аналогична, не работает?
Скажите пожалуйста, зачем классу ib-ju выставлен font-size: 0?.. Из-за этого свойства этот способ не работает в опере для более чем двух элементов.
И сразу же опережу следующие быстрые ответы. Этот способ не содержит ни дополнительных элементов. Работает в ie6, ie7, ie8, ff3, opera10, safari, chrome. Поддерживает выравнивание по вертикале. Можно использовать и для более 2 блоков. Смотрите внимательно код.
Вы, скорее всего, формируете код в каком-то редакторе, который при выравнивании кода зачем-то, вставляет символы пробелов, которые влияют на отображение элементов в webkit браузерах. Убрав их всё стабилизируется в webkit браузерах. Попробуйте их убрать или написать последний спан неразрывно с закрывающимся дивом на конце.
хм… интересно. узнал новый способ. я обычно делаю вариацию на тему:
направо:
wrap {
position: relative;
}
.right {
position: absolute;
right: 0;
}
или чаще float: right
направо:
wrap {
position: relative;
}
.right {
position: absolute;
right: 0;
}
или чаще float: right
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Позиционирование элементов по разным сторонам блока