chocolate_moles Posted October 19, 2018 Report Share Posted October 19, 2018 Итак, имеется 4 блока, на мобильных устройствах они располагаются в столбик, друг за другом. Задача: сделать для больших разрешений сетку в два столбца, в которой высота всех блоков может быть различной, и не должно быть разрывов между блоками Quote Link to comment Share on other sites More sharing options...
0 chocolate_moles Posted October 19, 2018 Author Report Share Posted October 19, 2018 2 часа назад, AlexZaw сказал: Странно, а какого решения вы ждете с учетом того что js использовать нельзя? Тем более что другого варианта все равно нет https://jsfiddle.net/skdxch2m/ 1 Quote Link to comment Share on other sites More sharing options...
0 AbaGardon Posted October 19, 2018 Report Share Posted October 19, 2018 28 минут назад, chocolate_moles сказал: Итак, имеется 4 блока, на мобильных устройствах они располагаются в столбик, друг за другом. Задача: сделать для больших разрешений сетку в два столбца, в которой высота всех блоков может быть различной, и не должно быть разрывов между блоками Float & Flex ? 320px это мобильная 992px desctop или общая ширина сайта должна быть 1312px ? Quote Link to comment Share on other sites More sharing options...
0 chocolate_moles Posted October 19, 2018 Author Report Share Posted October 19, 2018 3 минуты назад, AbaGardon сказал: Float & Flex ? 320px это мобильная 992px desctop или общая ширина сайта должна быть 1312px ? float flex grid table, все что пожелаете, только без скриптов. 320 и 992 это для примера, ширина вообще не важна Задача превратить столбик из разноцветных кубиков слева, в плитку из тех же самых кубиков справа. Или наоборот Quote Link to comment Share on other sites More sharing options...
0 AlexZaw Posted October 19, 2018 Report Share Posted October 19, 2018 Разбейте на две колонки на широком экране, и всех делов. 1 Quote Link to comment Share on other sites More sharing options...
0 chocolate_moles Posted October 19, 2018 Author Report Share Posted October 19, 2018 6 часов назад, AlexZaw сказал: Разбейте на две колонки на широком экране, и всех делов. Спасибо, все оказалось действительно так просто, а я столько времени потратил на анимацию, кубики нарисовал, в разный цвет покрасил, цифры поставил. Quote Link to comment Share on other sites More sharing options...
0 AlexZaw Posted October 19, 2018 Report Share Posted October 19, 2018 4 часа назад, chocolate_moles сказал: Спасибо, все оказалось действительно так просто, а я столько времени потратил на анимацию, кубики нарисовал, в разный цвет покрасил, цифры поставил. Странно, а какого решения вы ждете с учетом того что js использовать нельзя? Тем более что другого варианта все равно нет - либо две колонки ( если порядок на мобильном не важен), либо гриды. И будет вам счастье, - и блоки будут от высоты не зависеть, и перестроить их в одну колонку на мобильном можно...А то что вы время на анимацию тратили и все остальное, так это ваше дело... Или вы хотите что-бы за вас все сделали? Тогда, извините, вам в другой раздел... Quote Link to comment Share on other sites More sharing options...
0 mrnobody Posted October 20, 2018 Report Share Posted October 20, 2018 11 часов назад, AlexZaw сказал: либо гриды. блин, ппробовал на гридах сделать — не получилось. Думал поможет свойство `grid-auto-flow: dense;` - не помогло ((. Quote Link to comment Share on other sites More sharing options...
0 AlexZaw Posted October 20, 2018 Report Share Posted October 20, 2018 11 часов назад, chocolate_moles сказал: https://jsfiddle.net/skdxch2m/ Действительно, про то что можно отменить обтекание с одной стороны, я как то не подумал. ps.только наблюдается один забавный эффект, если убрать фон у блоков 1-3, и назначить фон для блока 4, то у всех блоков будет фон четвертого блока, так как он растягивается на весь контейнер, так что решение хоть и неплохое, но с глюками Quote Link to comment Share on other sites More sharing options...
0 chocolate_moles Posted October 21, 2018 Author Report Share Posted October 21, 2018 16 часов назад, AlexZaw сказал: Действительно, про то что можно отменить обтекание с одной стороны, я как то не подумал. ps.только наблюдается один забавный эффект, если убрать фон у блоков 1-3, и назначить фон для блока 4, то у всех блоков будет фон четвертого блока, так как он растягивается на весь контейнер, так что решение хоть и неплохое, но с глюками Так не надо задавать фон для этого блока, он является лишь элементом сетки, а для фона и собственно самого контента есть вложенный div Quote Link to comment Share on other sites More sharing options...
0 AlexZaw Posted October 21, 2018 Report Share Posted October 21, 2018 7 часов назад, chocolate_moles сказал: Так не надо задавать фон для этого блока, он является лишь элементом сетки, а для фона и собственно самого контента есть вложенный div Да это понятно, просто указал на такое поведение. Причем если с шириной все понятно, то откуда берется высота не совсем ясно Quote Link to comment Share on other sites More sharing options...
0 chocolate_moles Posted October 21, 2018 Author Report Share Posted October 21, 2018 5 минут назад, AlexZaw сказал: Да это понятно, просто указал на такое поведение. Причем если с шириной все понятно, то откуда берется высота не совсем ясно Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted October 21, 2018 Report Share Posted October 21, 2018 (edited) Высота берется из особенностей работы блочного контекста форматирования. Блочные боксы без clear идут друг за другом, разделенные лишь «схлопнутыми» margin-ами, а float-ы проходят сквозь них, расталкивая их содержимое. Поэтому 2-й плавающий блок не выталкивает сам 4-й блок вниз, а накладывается на него. Но если добавить 4-му блоку clear: right, то он перестанет включать в себя высоту 2-го блока (и 2-й блок не будет накладываться на его вложенный блок, так что можно будет убрать у последнего display:inline-block и width). Edited October 21, 2018 by SelenIT был перепутан 2-й блок с 3-м 1 Quote Link to comment Share on other sites More sharing options...
0 AlexZaw Posted October 21, 2018 Report Share Posted October 21, 2018 35 минут назад, SelenIT сказал: Поэтому 3-й плавающий блок не выталкивает сам 4-й блок вниз, а накладывается на него. Почему третий блок накладывается на 4 понятно. Почему растягивается контейнер тоже понятно. Непонятно почему четвертый блок растягивается по высоте на весь контейнер(включая блоки 1 и 2), когда, по логике, он должен быть по высоте контента и вообще вести себя так как будто рядом никого нет. Quote Link to comment Share on other sites More sharing options...
0 SelenIT Posted October 21, 2018 Report Share Posted October 21, 2018 Упс, имел в виду 2-й блок, а написал 3-й (смотрел на сетку на флоатах, а думал про сетку на колонках, видимо). Приношу извинения! Второй блок (плавающий) накладывается на 4-й и выталкивает его контент вниз (под себя), поэтому общая высота 4-го блока складывается из высоты 2-го + высота контента 4-го + его отступы. 1-й и 3-й плавающие блоки накладываются на padding 4-го и не пересекаются с его контентом, поэтому на его высоту не влияют. 1 Quote Link to comment Share on other sites More sharing options...
0 AlexZaw Posted October 21, 2018 Report Share Posted October 21, 2018 1 час назад, SelenIT сказал: Второй блок (плавающий) накладывается на 4-й и выталкивает его контент вниз (под себя) Блин, точно, в блоках же есть инлайновый контент! Четвертый блок остается на месте, а выталкивается его контент, так как он то "знает" про обтекание.Спасибо! Вот что значит давно не работать с float - все забывается. Quote Link to comment Share on other sites More sharing options...
Question
chocolate_moles
Итак, имеется 4 блока, на мобильных устройствах они располагаются в столбик, друг за другом.
Задача: сделать для больших разрешений сетку в два столбца, в которой высота всех блоков может быть различной, и не должно быть разрывов между блоками
Link to comment
Share on other sites
15 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.