Как сделать криво

[Жуля]

Возникла такая проблема. Дано: изображения разного размера, выровнены по верхнему краю, оформлены в данный момент div float=left, ессно, если в середине такого списка возникает длинная картинка, об неё "запинается" следующий ряд.

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

Сейчас:

Надо:

Возможно ли такое?

Edited February 28, 2011 by Жуля

[Scrum]

Как вариант.

Определить максимальное значение ширины и высоты и соответственно указать эти значения блоку.

[Жуля]

Как вариант.

Определить максимальное значение ширины и высоты и соответственно указать эти значения блоку.

То есть в этом случае придется ограничивать кол-во картинок на строке?

[Scrum]

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

[psywalker]

Как вариант.

Определить максимальное значение ширины и высоты и соответственно указать эти значения блоку.

Зачем. А inline-block; уже отменили?

[Scrum]

Зачем. А inline-block; уже отменили?

Затем что для ie 6 все равно придётся указывать высоту.

[psywalker]

Затем что для ie 6 все равно придётся указывать высоту.

хм...ты меня удивляешь.

[Жуля]

А можно немного подробнее, кому надо прописать inline-block?

[psywalker]

А можно немного подробнее, кому надо прописать inline-block?

http://forum.htmlbook.ru/index.php?s=&...st&p=170848

[Scrum]

хм...ты меня удивляешь.

Не переживай я то же удивляюсь себе порой.

[Жуля]

http://forum.htmlbook.ru/index.php?s=&...st&p=170848

Отлично! То, что надо. Спасибо!

Edited February 28, 2011 by Жуля

[psywalker]

Не переживай я то же удивляюсь себе порой.

Да не, я просто подумал, может тебе и не стоит пока на новые технологии то переходить, раз старые не закреплены ещё как следует? Я вот сам ещё например не перехожу. Хочу старые отточить.

Отлично! То, что надо. Спасибо!

Тебе спасибо.

[Scrum]

может тебе и не стоит пока на новые технологии то переходить

Совмещение было бы самым уместным в данном тексте.

раз старые не закреплены ещё как следует?

Знаешь в чем разница в предложенных тобой и мной вариантах ?

Хочу старые отточить.

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

[psywalker]

Знаешь в чем разница в предложенных тобой и мной вариантах ?

В чём?

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

А я говорил про понимание механизмов работы и их поведение.

[Scrum]

А я говорил про понимание механизмов работы и их поведение.

Со временем, как рисование так и верстка, ты начнешь выбирать более оптимальные и практичные механизмы, естественно более неудобные механизмы будут забываться.

В чём?

Мой вариант валидный.

[psywalker]

Со временем, как рисование так и верстка, ты начнешь выбирать более оптимальные и практичные механизмы, естественно более неудобные механизмы будут забываться.

Ну вот в нашем случае вариант с inline-block; просто великолепный на мой взгляд. Или ты хочешь сказать, что проставление высоты всем блокам самый оптимальный вариант, из-за которого ты забыл все остальные?

Мой вариант валидный.

хм...ну вообще то условные комментарии ещё никто не отменял.

[swetlana]

валидность — это безумно здорово, но inline-block — всё же более гибкий вариант.

[Scrum]

просто великолепный на мой взгляд

Не было отрицания.

inline-block - не востребовано и часто не применяемое значение в силу неполной или неправильной поддержки. Последствия неизвестны.

хм...ну вообще то условные комментарии ещё никто не отменял.

Не решение, очередные костыли.

Теперь прикинь общую сумму костылей и указание высоты ?

У каждого есть минусы и плюсы, что практичнее ?

но inline-block — всё же более гибкий вариант.

По мне так Flexbox самый идеальный вариант ))

[psywalker]

inline-block - не востребовано и часто не применяемое значение в силу неполной или неправильной поддержки. Последствия неизвестны.

Ну извини дружище, это уже зависит от опыта и знаний. Если ты знаешь что делаешь, то и последствий никаких не будет.

Не решение, очередные костыли.

Теперь прикинь общую сумму костылей и указание высоты ?

У каждого есть минусы и плюсы, что практичнее ?

inline в сочетании с zoom делает блок в ИЕ inline-block-овым и поэтому там можно работать с ним точно так же как и везде. Зачем мне указывать высоту, если она мне не нужна и я хочу, чтобы кол-во содержимого у меня было любым?

По мне так Flexbox самый идеальный вариант ))

Но это ты уже загнул дружище.

[swetlana]

По мне так Flexbox самый идеальный вариант ))

очень даже может быть.

Но знаешь, чем отличается идеальный вариант от реального?

[Scrum]

Ну извини дружище, это уже зависит от опыта и знаний. Если ты знаешь что делаешь, то и последствий никаких не будет.

Дело больше не в последствиях, а в не востребованности из-за плохой поддержки, как следствие такие знания выпадают. Таких значений и свойств море, и (вот тут теперь я думаю) как ты так и я большей частью не пользуемся (список приводить не буду) пользуемся только самыми ходовыми и практичными, в случае неординарных задач применяем редко используемые.

inline в сочетании с zoom делает блок в ИЕ inline-block-овым и поэтому там можно работать с ним точно так же как и везде. Зачем мне указывать высоту, если она мне не нужна и я хочу, чтобы кол-во содержимого у меня было любым?

Вот мы и подобрались к самому вкусному )) ам хочу рисунок 800х600. есть идеи ?

Но это ты уже загнул дружище.

Немного под впечатление от семинара 2010.

Но знаешь, чем отличается идеальный вариант от реального?

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

А отличие это как в жизни ))

[psywalker]

Вот мы и подобрались к самому вкусному )) ам хочу рисунок 800х600. есть идеи ?

Не понял. Опиши задачу поподробнее.

Дело больше не в последствиях, а в не востребованности из-за плохой поддержки, как следствие такие знания выпадают. Таких значений и свойств море, и (вот тут теперь я думаю) как ты так и я большей частью не пользуемся (список приводить не буду) пользуемся только самыми ходовыми и практичными, в случае неординарных задач применяем редко используемые.

Я считаю в нашем случае эти знания нам как раз очень нужны. Я имею ввиду с inline-block;

[Scrum]

Не понял. Опиши задачу поподробнее.

хм )) Задача ТС, захожу на сайт и распологаю там картинку 800*600, что происходит ?

Я считаю в нашем случае эти знания нам как раз очень нужны. Я имею ввиду с inline-block;

Ну я не спорю, на вскидку, пару тройку примеров где ты используешь inline-block ?

[swetlana]

в горизонтальных менюшках, кстати, время от времени используется.

[Scrum]

в горизонтальных менюшках, кстати, время от времени используется.

А просто inline чем плох ? Скорее всего тем что приходиться высчитывать отступы, учитывать размер шрифта, ну да может быть попробую но это опять набор костылей, или нет ?

[psywalker]

хм )) Задача ТС, захожу на сайт и распологаю там картинку 800*600, что происходит ?

И что произойдёт? Блоки так же нормально выравняться.

Ну я не спорю, на вскидку, пару тройку примеров где ты используешь inline-block ?

- Выравнивание меню по горизонтали

- В случае ТС

- Выравнивание текста по вертикали

- Для указания строчным элементов отступов

Это только на вскидку. Вообще вещь очень полезная на самом деле. Советую обратить на неё внимание.

А просто inline чем плох ? Скорее всего тем что приходиться высчитывать отступы, учитывать размер шрифта, ну да может быть попробую но это опять набор костылей, или нет ?

Плох тем, что ты например не сможешь назначить им размеры, не сможешь назначить отступы и т.д.