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