[Ответить в тред] Ответить в тред

02/12/16 - Конкурс визуальных новелл доски /ruvn/
15/11/16 - **НОВЫЙ ФУНКЦИОНАЛ** - Стикеры
09/10/16 - Открыта доска /int/ - International, давайте расскажем о ней!

Check this out!

Новые доски: /2d/ - Аниме/Беседка • /wwe/ - WorldWide Wrestling Universe • /ch/ - Чатики и конфочки • /int/ - International • /ruvn/ - Российские визуальные новеллы • /math/ - Математика • Создай свою

[Назад][Обновить тред][Вниз][Каталог] [ Автообновление ] 54 | 6 | 13
Назад Вниз Каталог Обновить

Аноним 18/03/17 Суб 19:02:52  149083118  
htmlcss.jpg (34Кб, 410x420)
1.png (9Кб, 544x500)
2.png (2Кб, 544x500)
Я хуйов в верстке. Помоги анон, нужно подправить одну хуйню. Есть div'ные карточки с фиксированной шириной, расположенные в flex контейнере, которому применено css свойство: justify-content: space-between т.е. эти карточки заполняют всю ширину страницы с равномерными отступами. Есть проблема - пик2. Как сделать, чтобы если в последнем ряду меньше карточек то они растягивались также какбудто там есть еще недостающее количество карточек.

Если проще: из пик2 должно получиться пик3
Аноним 18/03/17 Суб 19:07:45  149083481
бамп
Аноним 18/03/17 Суб 19:09:55  149083633
С помощью javascript
Аноним 18/03/17 Суб 19:12:36  149083843
>>149083633
не хотеть его туда тулить. Че кссом нельзя сделать?
Аноним 18/03/17 Суб 19:16:53  149084179
бамп
Аноним 18/03/17 Суб 19:17:15  149084217
А почему бы не сделать их inline-block?
Аноним 18/03/17 Суб 19:19:48  149084392
бамп
Аноним 18/03/17 Суб 19:20:43  149084453
>>149084217
нужно чтобы они прымыкали к краям контейнера. И пространство меж ними было равным. Хз может как-то можно это реализовать иными способами, подскажи
Аноним 18/03/17 Суб 19:23:56  149084683
>>149084453
Окей.
Задаешь родителю font-size: 0;(чтобы не было маленьких ненужных отступов).
Всем этим дочерним блокам задаешь
display: inline-block;
margin-right: нужны отступ справа в пикселях
Дальше убираешь блок у каждого четвертого элемента block-name:nth-child(4n) {
margin-right: 0;
Аноним 18/03/17 Суб 19:25:04  149084756
>>149084683
Можешь скинуть размер блока, накидаю полностью стили.
Аноним 18/03/17 Суб 19:25:33  149084784
>>149083118 (OP)
flexbox для пидоров?
Аноним 18/03/17 Суб 19:26:26  149084841
>>149084784
Схуяли?
Аноним 18/03/17 Суб 19:35:42  149085547
>>149084683
нихт. Размер блока в котором они расположены - не фиксирован, т.е. он может быть разной width в зависимости от экрана. Количество карточек тоже может быть разным. Фиксирован только маргин-райт у блока внутри которого они располодены
Аноним 18/03/17 Суб 19:40:09  149085930
>>149085547
Тогда я бы подгонял ширину дочерних блоков в процентах, а маргин справа ставил в пикселях. Ну а вообще лучше бы делал все фиксированным и уже в медиа-запросах прописывал их поведение на нужных разрешениях.
Аноним 18/03/17 Суб 19:44:21  149086312
>>149085930
Да все н еучесть. Лан спасиб. Бля надо убегать, еще спрошу какнить(
Аноним 18/03/17 Суб 19:46:38  149086510
>>149083118 (OP)
Научись пользоваться джиесфидлом
Аноним 18/03/17 Суб 20:24:36  149089601
>>149083118 (OP)
Выводить там блоки с visible hidden?
Аноним 18/03/17 Суб 21:16:14  149093740
>>149083118 (OP)
дай родителю

&:after {
content: "";
flex: auto;
}
Аноним 18/03/17 Суб 21:17:18  149093811
>>149083118 (OP)
codepen Дай. Чо как пидор то.
Аноним 18/03/17 Суб 21:55:24  149096648
>>149093811
https://jsfiddle.net/b5q47cne/
поуменьшай окно браузера, увидишь о чем я
Аноним 18/03/17 Суб 21:57:02  149096749
1.png (5Кб, 619x392)
>>149096648
пик
Аноним 18/03/17 Суб 22:12:58  149097809
>>149083118 (OP)
.main:after {
content: "";
flex: 0 1 150px;
}

лови
Аноним 18/03/17 Суб 22:26:16  149098782
Не хочешь для каждой строки делать отдельный флекс контейнер? Тогда для последнего особое правило просто применять через ласт чайлд
Аноним 18/03/17 Суб 22:29:05  149098971
>>149097809
Можно просто flex: auto ящитаю
Аноним 18/03/17 Суб 22:29:45  149099021
>>149098971
Хотя не, там маргины(
Аноним 18/03/17 Суб 22:30:17  149099059
>>149083118 (OP)
>justify-content: space-between

justify-content: flex-start
Аноним 18/03/17 Суб 22:31:31  149099154
Вообще на stackoverflow сказали, что один из костылей, это всегда дописывать столько пустых блоков нулевой высоты, сколько максимум влезает в одну строку. Они схлопываются, но если будет место для них, то они будут учитываться при распределении места на последнем ряду и всё будет тип-топ. В будущем собираются добавить возможность делать такую же хуйню проще через ::after(n)
Аноним 18/03/17 Суб 22:32:55  149099270
>>149099059
Тогда отступов не будет между блоками
Аноним 18/03/17 Суб 22:34:08  149099374
>>149099154
но я не знаю сколько блоков будет. Это от ширины экрана зависит
Аноним 18/03/17 Суб 22:35:15  149099455
>>149099374
Ну у тебя есть максимум ширина контентной области? Вот от неё и пляши. Сколько на сейчас обычно? 1170? Добавишь больше, ничего стращшного не будет вроде. Потести
Аноним 18/03/17 Суб 22:36:45  149099588
>>149099455
>Потести
нихуя https://jsfiddle.net/b5q47cne/1/
Аноним 18/03/17 Суб 22:36:59  149099610
Конкретно тут самый не мозгоёбский вариант это наверно >>149097809
>.main:after {
>content: "";
>flex: 0 1 150px;
>}
Аноним 18/03/17 Суб 22:38:17  149099736
ой пацаны, кто вас так верстать учит
Аноним 18/03/17 Суб 22:39:53  149099896
>>149099588
Я особо не разбирался, сори, вот короче пример
http://codepen.io/dalgard/pen/Dbnus
Может у тебя хуйня из-за маргинов каких-то, если разберусь - напишу
Аноним 18/03/17 Суб 22:41:06  149100009
>>149099270
justify-content: flex-start;
margin:10px;

Только для адаптивки самый живой вариант все равно justify-content: center.
Аноним 18/03/17 Суб 22:43:11  149100193
>>149099610
если добавляю больше карточек то нихуя
Аноним 18/03/17 Суб 22:43:57  149100253
>>149100009
мне нужно, чтобы оно прилипало к краям родительского контейнера
Аноним 18/03/17 Суб 22:44:12  149100280
>>149100193
https://jsfiddle.net/b5q47cne/10/
Аноним 18/03/17 Суб 22:45:05  149100373
>>149100280
Вот тут вроде работает. Понял как?
Аноним 18/03/17 Суб 22:45:29  149100411
>>149083118 (OP)
Добивай ряд пустыми прозрачными карточками.
Аноним 18/03/17 Суб 22:45:48  149100436
>>149100373
Только бэкграунд колор там лишний
Аноним 18/03/17 Суб 22:46:11  149100466
>>149100193
нет, все правильно там. посмотри стартовые стили.
все блоки по умолчанию 150 пикселей, а у тебя поебота на скрине.
Аноним 18/03/17 Суб 22:47:30  149100579
>>149100411
или даже одной, у окторой flex:x где x количество недостающих карточек.
Аноним 18/03/17 Суб 22:48:09  149100639
>>149100466
На самом деле действительно поебота получается. Так что смотри мой вариант >>149100280
Аноним 18/03/17 Суб 22:48:44  149100693
о, нужный тред.
Хакеры, подскажите.
Есть грубо говоря div, растянутый на всю ширину и высоту. Нужно заполнить его квадратиками дивами. Как сделать?
Аноним 18/03/17 Суб 22:49:27  149100760
>>149100693
flex
А вообще поподробней задачу объясни
Аноним 18/03/17 Суб 22:51:15  149100894
blob (44Кб, 1976x1190)
>>149100639
пока контейнер не будет ограничен таким хуем работать не будет
Аноним 18/03/17 Суб 22:51:19  149100905
>>149100639
https://jsfiddle.net/b5q47cne/19/
Аноним 18/03/17 Суб 22:52:20  149100987
>>149100280
>>149100411
Вроде работает. Но мне не нравится, т.к. я не знаю сколько карточек может влазить в ряд - на разных мониторах по разному может быть. Хотя ща подумал, можно же сколько хочешь? Высота же - 0, т.е. скролл не будет появлятся
Аноним 18/03/17 Суб 22:52:43  149101022
blob (10Кб, 736x469)
>>149100760
Нужно сделать визуально как пикрел. Только каждая ячейка - div. И при изменении размеров родительского поля, все положения дивов и их кол-во остается неизменным, а размер меняется.
Аноним 18/03/17 Суб 22:53:02  149101038
>>149100987
Достаточно одного пустого с flex:0 >>149100905
и не важно сколько будет в ряду
Аноним 18/03/17 Суб 22:54:53  149101182
>>149100894
Больше пустых блоков. Я же сказал. Берёшь мак сайз области, делишь на минимальную ширину одного блока, вот сколько пустых заглушек тебе надо.
Аноним 18/03/17 Суб 22:55:51  149101260
>>149101182
Одной достаточно.
Аноним 18/03/17 Суб 22:57:42  149101389
>>149100987
>>149100905
такая проблема. Сделал ширину 50px; Осталось свободное пространство в одной строке занимаемое этими пустыми блоками. Т.е. ели у кого-то монитор будет подлиннее, то блоки не будут стыковаться к краям контейнера
Аноним 18/03/17 Суб 23:00:00  149101549
Безымянный.png (15Кб, 627x546)
>>149101389

[Назад][Обновить тред][Вверх][Каталог] [Реквест разбана] [Подписаться на тред] [ ] 54 | 6 | 13
Назад Вверх Каталог Обновить

Топ тредов
Избранное