Как выровнять второй ряд обернутых карт в первую строку с помощью Flexbox? [Дубликат]
Привязать событие к родительскому объекту, который уже существует:
$(document).on("click", "selector", function() {
// Your code here
});
35
задан Michael_B 4 March 2017 в 17:02
поделиться
5 ответов
То, что вы хотите, может быть достигнуто тремя способами: CSS мудрый:
1. flexbox:
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-width: {max-width-of-container} /* normally 100%, in a relative container */
min-height: {min-height-of-container}; /* i'd use vh here */
}
.child {
width: {column-width};
display: block;
}
2. CSS-столбцы
(это решение имеет очень четкое преимущество встроенного column-span - довольно удобно для названий). Недостатком является упорядочивание элементов в столбцах (первый столбец содержит первую треть элементов и т. Д.). Для этого я сделал jsFiddle .
.parent {
-webkit-columns: {column width} {number of columns}; /* Chrome, Safari, Opera */
-moz-columns: {column width} {number of columns}; /* Firefox */
columns: {column width} {number of columns};
}
.child {
width: {column width};
}
/* where {column width} is usually fixed size
* and {number of columns} is the maximum number of columns.
* Additionally, to avoid breaks inside your elements, you want to add:
*/
.child {
display: inline-block;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;
}
3. Масонский плагин
абсолютное позиционирование после вычисления размеров сделанных элементов, через JavaScript (плацдарм кладки).
4
ответ дан Andrei Gheorghiu 17 August 2018 в 17:44
поделиться
-
1# 1 не работает для меня в последнем Firefox (я должен обновить пример на игровой площадке, сделаю это). # 2 действительно подошел очень близко к нескольким причудам, которые нужно отработать, но я понимаю, что использует новую сетчатую систему CSS, которая имеет очень плохую поддержку браузера. – Guybrush Threepwood 27 December 2015 в 16:05
-
2Вы правы насчет №1. Я не смог заставить его работать, используя flex. Не уверен, что вы подразумеваете под «очень плохой поддержкой браузера». Можете ли вы указать мне некоторые цифры, пожалуйста? Я думаю, что № 2 имеет проблемы для менее 5% пользователей. Поправьте меня если я ошибаюсь. – Andrei Gheorghiu 27 December 2015 в 18:33
-
3Если вы посмотрите на статистику относительного использования, сетка не поддерживается для огромного количества пользователей, поэтому она, вероятно, еще не готова к производству. Это отличное решение, спасибо за это. caniuse.com/#search=grid – Guybrush Threepwood 29 December 2015 в 16:44
-
4Захватывающий. Можете ли вы выявить какие-либо различия между столбцами grid и ? – Andrei Gheorghiu 29 December 2015 в 17:13
-
5lol, был этот сарказм? В любом случае, вы правы. – Guybrush Threepwood 29 December 2015 в 17:14
Вы можете добиться эффекта каменной кладки в соответствии с вашим снимком экрана, но вы установили высоту внешнего div динамически
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.item-list {
max-width: 400px;
border: 1px solid red;
display: -ms-flexbox;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vw;
}
.item-list__item {
border: 1px solid green;
width: 50%;
}<div class="item-list" >
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
</div>
<div class="item-list__item">
Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
</div>
</div>0
ответ дан David Chelliah 17 August 2018 в 17:44
поделиться
подход column кажется хорошим компромиссом, если вы установите column-width через vmin или vmax единицы и drop column-count (первый фрагмент), display:grid и vmin также являются опцией для futur (второй фрагмент).
фрагмент вдохновлен ответом @Lanti.
тестовая демонстрация с vmin
.container { } ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { -webkit-column-width:50vmin; -moz-column-width:50vmin; column-width:50vmin; -webkit-column-fill:balance; -moz-column-fill:balance; column-fill:balance; -webkit-column-gap: 3px; -moz-column-gap: 3px; column-gap: 3px; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; }<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>ссылка среди других https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin- vmax /
display:gridcoud делает это также простым с автозаполнением, но для этого требуется установить значение диапазона до самого высокого изображения, чтобы строки и столбцы могли inbricate
.container {} ul { margin: 0; padding: 0; } ul li { list-style: none; font-size: 0; } .portfolio ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(50vmin, 1fr)); grid-gap: 5px; grid-auto-rows: minmax(10px, 1fr); grid-auto-flow: dense; } .portfolio ul:hover img { opacity: 0.3; } .portfolio ul:hover img:hover { opacity: 1; } .portfolio ul li { margin-bottom: 3px; } .portfolio ul li img { max-width: 100%; transition: 0.8s opacity; } li { border: solid blue; grid-row-end: span 1; display: flex; align-items: center; background: lightgray; } li:nth-child(1), li:nth-child(3), li:nth-child(6), li:nth-child(7), li:nth-child(8), li:nth-child(9), li:nth-child(10), li:nth-child(11) { border: solid red; grid-row-end: span 2 }<section class="container portfolio"> <ul> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li> <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li> </ul> </section>вы можете видеть https://css-tricks.com/snippets/css/complete-guide-grid/
1
ответ дан G-Cyr 17 August 2018 в 17:44
поделиться
-
1Порядок изображений в первом фрагменте неверен, это проблема с размещением в столбцах. Но второй, похоже, на месте! Действительно мило – Guybrush Threepwood 21 April 2017 в 13:36
Вместо flexbox я рекомендую использовать столбцы для таких сеток. Как вы можете видеть, расстояние на нижних изображениях может быть лучше, но для собственного решения для CSS я считаю, что это довольно аккуратно. Нет больше JS:
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
font-size: 0;
}
.portfolio ul {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 3px;
-webkit-column-gap: 3px;
column-gap: 3px;
}
.portfolio ul:hover img {
opacity: 0.3;
}
.portfolio ul:hover img:hover {
opacity: 1;
}
.portfolio ul li {
margin-bottom: 3px;
}
.portfolio ul li img {
max-width: 100%;
transition: 0.8s opacity;
}<section class="container portfolio">
<ul>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
<li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
</ul>
</section>0
ответ дан Lanti 17 August 2018 в 17:44
поделиться
-
1– Guybrush Threepwood 23 January 2017 в 20:09
Flexbox - это «одномерная» система компоновки: она может выравнивать элементы вдоль горизонтальных или вертикальных линий.
Истинная сетка «2-мерная»: она может выравнивать элементы вдоль горизонтальной и вертикальной линий. Другими словами, ячейки могут располагаться между столбцами и строками, которые невозможно выполнить с помощью flexbox.
Вот почему flexbox имеет ограниченную емкость для построения гридов. Это также является причиной того, что W3C разработал еще одну технологию CSS3, Grid Layout (см. Ниже).
В контейнере flex с flex-flow: row wrap элементы гибкости должны быть завернуты к новым строкам .
Это означает, что элемент гибкости нельзя обернуть под другим элементом в той же строке .
Обратите внимание, что div # 3 обертывается ниже div # 1 , создавая новую строку. Он не может упасть ниже div # 2 .
В результате, когда элементы не самые высокие в строке, остается пустое пространство, создавая неприглядные пробелы.
image credit: Jefree Sujit
column wrap Решение
Если вы переключитесь на flex-flow: column wrap, элементы гибки будут стекаться вертикально, а сетчатая компоновка более достижима. Однако контейнер с колоновым направлением имеет три потенциальные проблемы сразу:
- Он расширяет контейнер горизонтально, а не вертикально (например, макет Pinterest).
- Это требует, чтобы контейнер имел фиксированную высоту, поэтому элементы знают, где их можно обернуть.
- На момент написания этой статьи у него есть недостаток во всех основных браузерах, где контейнер не работает 't расширяться для размещения дополнительных столбцов .
В результате контейнер со столбцом может быть невозможен во многих случаях.
Другие решения
- Добавить контейнеры В первых двух изображениях выше рассмотрите обертывание элементов 2 и 3 в отдельный контейнер. Этот новый контейнер может быть одним из братьев к пункту 1. Выполнено. Вот подробный пример: Раскладка клавиатуры калькулятора с помощью flexbox . Один недостаток стоит выделить: если вы хотите использовать свойство
orderдля повторной компоновки вашего макета (например, в медиа-запросах), этот метод может устранить эту опцию. - Desandro Masonry Масонство - это библиотека компоновки сетки JavaScript. Он работает, поместив элементы в оптимальное положение на основе имеющегося вертикального пространства, похожего на камни для камней в стене. источник: http://masonry.desandro.com/
- Как создать сайт, который работает как Pinterest [ Pinterest] действительно классный сайт, но то, что я нахожу интересным, - это то, как эти пинборды выложены ... Поэтому цель этого учебника - воссоздать этот отзывчивый эффект блока ... source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html
- Модуль компоновки CSS-сетки Уровень 1 Этот CSS-модуль определяет двумерную систему компоновки на основе сетки, оптимизированную для дизайна пользовательского интерфейса. В модели макета сетки дети контейнера сетки могут быть помещены в произвольные слоты в предопределенной гибкой или фиксированной сетке макета. источник: https://drafts.csswg.org/css-grid/ Пример компоновки сетки: Макетная кладка только для CSS, но с элементами, упорядоченными по горизонтали
25
ответ дан Michael_B 17 August 2018 в 17:44
поделиться
Другие вопросы по тегам: