пс: я не верстальщик

Анрил в текущий момент без костылей

Юзай плагин какой-нибудь для сеток, типа masonry

вот пример как нужно

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

Юзай плагин какой-нибудь для сеток, типа masonry

не, мне наоборот такой не нужен, нужно по строчно ровно выводить

не, мне наоборот такой не нужен, нужно по строчно ровно выводить

Просто построчно? Но так, чтобы была четкая линия?

Это же обычный display: inline-block

вот как на скрине

тоесть внтури div с классом row

я хочу n ое количество элементов выводит в цикле

элемент-это изображение вогнанное в чёткие пропорции и подпись под ним

если большой экран-то в колонку по 4, если мобилка-то в одну колонку . Как то так

если большой экран-то в колонку по 4, если мобилка-то в одну колонку . Как то так

https://codepen.io/ZloDeeV/pen/XgjgLY

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

Кек

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> для адаптивности нужно?

Ребят, научитесь пользоваться dib все. Это лучше, чем флоаты

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> для адаптивности нужно?

не

Ребята

пожалуйста

помогите

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> для адаптивности нужно?

.col-sm-6.col-md-3 будет достаточно

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

Ребят, научитесь пользоваться dib все. Это лучше, чем флоаты

что за зверь? не гуглится

Это display: inline-block

Ребят, научитесь пользоваться dib все. Это лучше, чем флоаты

а df лучше чем dib

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

при наведении курсора?

а df лучше чем dib

Чем лучше?

флексибл потому что

https://codepen.io/ZloDeeV/pen/XgjgLY

я вставил там картинки

они разных пропорций, вот их по их ужать в один размер

флексибл потому что

Ну тогда давайте уже за гриды пофлудим

Посмотри пожалуйста по ссылке

Посмотри пожалуйста по ссылке

Ты не можешь изменить мою пенку)

Ну тогда давайте уже за гриды пофлудим

пофлуди, но толку от них, если поддержка плохая?

Ты не можешь изменить мою пенку)

блин

пофлуди, но толку от них, если поддержка плохая?

А толку от флексов, если до сих пор хватает косяков с поддержкой

А толку от флексов, если до сих пор хватает косяков с поддержкой

например?

при наведении курсора?

не совсем при наведении курсора. ситуйция довольно специфичная. несколько картинок накладываются друг на друга как слои = создается впечатление что это одно изображение. вот его нужно увеличивать и передвигаться по нему ("захватив мышкой"). собсна на этом изображении должны быть две кнопки (увеличение\уменьшение)

например?

например попробуй сделать блок в 100% высотой от флекс-элемента и посмотри в разных браузерах

Попробуй туда добавить ещё скроллов

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

Мне лень раскапывать примеры. Но несколько косяков конкретно в сафари не фиксятся уже пару лет

Не говоря уже про ie

ну про ие и говорить не надо

Даже хром в сложных случаях может обосраться там, где не обосрется сафари.

Ты не можешь изменить мою пенку)

вот такой например html https://pastebin.com/d4jbxp11

и притензии к разработчикам браузеров, раз поддержка такая плохая

Даже хром в сложных случаях может обосраться там, где не обосрется сафари.

.......

ой

тут бы примеры таких ситуаций

а то вообще представлений нет

тут бы примеры таких ситуаций

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

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

почему же?

вот такой например html https://pastebin.com/d4jbxp11

https://codepen.io/ZloDeeV/pen/XgjgLY

почему же?

Из-за разницы в работе флексов в браузерах

Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a multi-line flex container. Instead, it simply uses the item's flex-basis value, or its width if the flex basis is set to auto. see bug. Fixed in all versions > 10.

?

In Safari, the height of (non flex) children are not recognized in percentages. However other browsers recognize and scale the children based on percentage heights. (See bug) The bug also appeared in Chrome but was fixed in Chrome 51

Firefox 51 and below does not support Flexbox in button elements. Fixed in version 52.

Короч https://github.com/philipwalton/flexbugs

я сам могу зайти на caniuse и почитать это

мне важно было твое мнение

почему ты именно так считаешь

ERROR: S client not available

Моё мнение - юзать можно и нужно, но без костылей не обойтись

Потому что у меня за плечами два проекта на флексах

целых два?)

ну вот собственно они разной высоты получились

https://codepen.io/ZloDeeV/pen/XgjgLY

Там ограничение по высоте стояло для примера

целых два?)

Больших два, каждый по году

На кордове

Так что там ещё в добавок ещё и флексы на мобильниках

там, кстати, норм ситация, основная пробелема была в отличие работы сафари от хрома

ребят, кто-то поможет, или это значит что я аутист и здесь нельзя такое писать?)

Всем привет) Подскажите, пожалуйста, что загуглить. Прикрепляю пикчу с тремя элементами. 1) список, раскрывающийся при нажатии; 2) фон для цифер, сделать фоновой пикчей? 3) Пикчи при нажатии, которых меняется их описание. Может кто знает названия готовых реализаций. Заране спасибо^^

Всем привет) Подскажите, пожалуйста, что загуглить. Прикрепляю пикчу с тремя элементами. 1) список, раскрывающийся при нажатии; 2) фон для цифер, сделать фоновой пикчей? 3) Пикчи при нажатии, которых меняется их описание. Может кто знает названия готовых реализаций. Заране спасибо^^

Делай вручную сам

На то, чтобы найти готовое решение - больше времени потратишь

https://codepen.io/ZloDeeV/pen/XgjgLY

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

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

Мля

соглашусь

я с удовольствием, только намекните, что загуглить для 1 и 3, и дайте совет по второму, если можно)

ну вот собственно они разной высоты получились

https://codepen.io/ZloDeeV/pen/XgjgLY Вот без циклов

вот да. А чтобы теберь изображения в одинаковый формат загнать

тоесть есть там 4:3

насильно квадртаным

я с удовольствием, только намекните, что загуглить для 1 и 3, и дайте совет по второму, если можно)

1) open menu on click js 3) change content on click js

вписать в площадь

1) open menu on click js 3) change content on click js

спасибо^^

вписать в площадь

Если пропорции изображений всегда 4 к 3

https://codepen.io/ZloDeeV/pen/XgjgLY

https://codepen.io/ZloDeeV/pen/XgjgLY

Круто! Спасибо!

в итоге вобще от будстраповских col- отказаться в данном случае в div ах?

Да, только ширину им укажи