#html #css #masonry
#HTML #css #кладка
Вопрос:
Я создаю макет кладки с тенью. Но, к сожалению, тень обрезается как следующий фрагмент. Я знаю, что добавление некоторого нижнего отступа исправит это, но содержимое этой карточки может время от времени меняться, тогда высота будет меняться в зависимости от содержимого. Таким образом, проблема здесь нуждалась в чистом методе CSS, чтобы избавиться от отсечения дна при любой высоте и размере содержимого.
Спасибо
.masonry-cascading-grid-layout {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
padding-bottom: 120px;
.masonry-wrap{
padding-bottom: 120px;
}
}
.item-masonry {
display: inline-block;
padding: 0em;
margin: 0 0 1.5em;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-shadow: 0px 30px 60px -30px #757287, 0px 10px 100px -20px rgba(0,0,0,.25);//shadow
border-radius: 5px;
}
.masonry-cascading-grid-layout {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
} <div class="masonry-cascading-grid-layout">
<div class="masonry-wrap">
<div class="item-masonry">
<h3 class="title">Item 1</h3>
<div class="content"><p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p></div>
</div>
<div class="item-masonry">
<h3 class="title">Item 2</h3>
<div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
</div>
<div class="item-masonry">
<h3 class="title">Item 3</h3>
<div class="content"><p>No</p></div>
</div>
<div class="item-masonry">
<h3 class="title">Item 4</h3>
<div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p></div>
</div>
<div class="item-masonry">
<h3 class="title">Item 5</h3>
<div class="content"><p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p></div>
</div>
</div>
</div> Комментарии:
1. Эта проблема заняла у меня много времени, чтобы найти решение. Я много искал в Google, чтобы найти все необходимые свойства, которые, наконец, помогли мне достичь этого. Однако это было непросто. Возможно, вам понадобятся некоторые незначительные изменения с этим позже, но вам нужно будет только решить, какой div сохранить как position: relative; вот и все. Оцените и примите ответ. И счастливого вам кодирования :). У этого вопроса есть щедрость. Я также чувствую гордость сегодня. Мой первый ответ с щедростью. Оставайтесь благословенными. Боже, благослови программистов 🙂
2. Я думаю, что это отступ в нижней части контейнера, просто добавьте больше отступов, чтобы он мог показывать тень, я считаю, что это тоже ответы Имрана;) так что пальцы вверх.
3. вы слишком сильно растягиваете тень от окна, я думаю, вам нужно уменьшить ширину распространения тени, и, во-вторых, ваша первая тень от окна перекрывается на ближайшем поле, поэтому, если вы хотите иметь такую же ширину распространения тени, вам также нужно увеличить ширину желоба. это выглядит слишком утомительно.
4. @Rmaxx: Привет всем 🙂 Я не использовал заполнение, поскольку спрашивающий не хочет его использовать. Я как бы наложил div на обрезанный край родительского элемента и добавил к нему blur() и box-shdow . Это моя идея, чтобы решить эту проблему. Оставайся благословенным, приятель 🙂
5. @Isuru Dilshan: Обновил мой ответ в соответствии с вашими требованиями. Он намного более плавный, чем предыдущий. Наслаждайтесь кодированием и не забудьте принять мой ответ. Это поможет другим разработчикам, сталкивающимся с той же проблемой 🙂
Ответ №1:
Причина такого рода отсечения box-shadow заключается в том, что родительский элемент.
Я наконец-то придумал исправление для этого:
Обновить:
Наслаждайтесь приведенным ниже кодом:
body {
padding: 3rem 0;
}
.masonry-cascading-grid-layout {
margin: 1.5em 0;
padding: 0;
column-gap: 1.5em;
position: relative;
}
.item-masonry {
display: inline-block;
padding: 0em;
margin: 0 0 1.5em;
width: 100%;
box-sizing: border-box;
z-index: -1;
box-shadow: 0px 30px 60px -30px #757287,
0px 10px 100px -10px rgba(0, 0, 0, 0.25);
border-radius: 5px;
}
.masonry-cascading-grid-layout {
column-count: 2;
}
.quick-fix {
height: 10px;
width: 51%;
position: absolute;
bottom: -0.5rem;
left: -0.5rem;
z-index: 1;
background: #ccc;
box-shadow: 0px 0px 28px 28px #ccc;
filter: blur(8px);
} <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="masonry-cascading-grid-layout">
<div class="masonry-wrap">
<div class="item-masonry">
<h3 class="title">Item 1</h3>
<div class="content">
<p>
Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae
ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor
volutpat, at maximus justo pharetra. Donec eros tellus,
scelerisque at mauris non, mollis mollis velit.
<br /><br />
Praesent fringilla orci vitae ligula ultrices finibus a id risus.
Praesent sed quam pharetra, pulvinar diam iaculis, condimentum
eros. Duis accumsan rutrum aliquam. Donec id quam odio.
Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum
sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci
varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Suspendisse porttitor dapibus vehicula. Vivamus
scelerisque metus lectus, vel cursus nibh pretium in.
</p>
</div>
</div>
<div class="item-masonry">
<h3 class="title">Item 2</h3>
<div class="content">
<p>
Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
quam. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Suspendisse porttitor dapibus
vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
pretium in.
</p>
</div>
</div>
<div class="item-masonry">
<h3 class="title">Item 3</h3>
<div class="content"><p>No</p></div>
</div>
<div class="item-masonry">
<h3 class="title">Item 4</h3>
<div class="content">
<p>
Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
quam. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Suspendisse porttitor dapibus
vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
pretium in.<br />Ut id cursus ligula, sit amet pharetra nisi.
Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam
convallis nibh a tortor volutpat, at maximus justo pharetra. Donec
eros tellus, scelerisque at mauris non, mollis mollis velit.
</p>
</div>
</div>
<div class="item-masonry">
<h3 class="title">Item 5</h3>
<div class="content">
<p>
Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor
quam. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Suspendisse porttitor dapibus
vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on
pretium in.
</p>
</div>
</div>
</div>
<!-- Fix to bottom clipper -->
<div class="quick-fix"></div>
</div>
</body>
<!-- <script src="./script.js"></script> -->
</html> Комментарии:
1. Привет, Имран. Спасибо за вашу приверженность и ответ, это сложно.
2. Дорогой Исуру, я не спал всю ночь для этого. Мне пришлось придумать решение для этого, потому что эта проблема возникает много раз. Я также заметил, что в начале родительского div также есть такое же отсечение, которое вы, возможно, тоже заметили. Мы можем использовать тот же трюк и для этого. нам просто нужно использовать top:-3px; left:0; для этого div. Пожалуйста, примите ответ и оцените. Другие разработчики также выиграют от этого 🙂 Спасибо
3. О, чувак, извини. Я не думаю, что это решение. Потому что это относится к обоим столбцам. Слева и справа. Но я дам оценки за вознаграждение. Потому что вы единственный человек, который попробовал это. Если вы можете исправить это только для применения в левом столбце и привязки к нижней части, я соглашусь. (потому что отсечение происходит только с левой стороны этого макета) Я много стараюсь, но, к сожалению, я недостаточно умен, чтобы это исправить. Если у вас есть время, попробуйте. Это пойдет вам на пользу. Спасибо, Имран.
4. Это просто, мой друг, я на самом деле сделал эту часть изначально 🙂 Позвольте мне помочь вам с этим. И один такой. Ты замечательный человек, быть умным или нет — это совсем другое дело. Просто иногда идея не срабатывала. Позволь мне сделать это за тебя, мой друг. Позвольте мне еще раз проверить код. И на самом деле есть лучшее решение для этого в целом, используя CSS-Grid masonry. Тогда подход к этому будет совсем другим. Но давайте пока исправим это
5. Обновлено в соответствии с последним изменением, дорогой друг 🙂 Он работает только на половине стороны на всех размерах экрана 🙂 Примите ответ и оцените . Спасибо
Ответ №2:
Итак, я решил сделать это снова с самим собой. Я не могу принять ответ Имрана, потому что это сложно, но не является хорошей практикой кода. (Спасибо за вашу поддержку, Имран, но я начинаю с нуля, чтобы создать это снова.) Я нашел хорошую статью (https://tobiasahlin.com/blog/masonry-with-css /) написан Тобиасом Алином Бьером, и это дает знания, все, что мне нужно. Измените display: inline-block; flex и удалите внешнюю оболочку, чтобы устранить проблему. Теперь он выглядит чище и меньше😉
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* Your container needs a fixed height, and it
* needs to be taller than your tallest column. */
height: 1000px;
counter-reset: items;
padding-top: 50px;
}
.item {
width: 49%;
margin-bottom: 2%;
padding: 15px;
box-sizing: border-box;
box-shadow: 0px 30px 60px -30px #757287,
0px 10px 100px -20px rgba(0, 0, 0, 0.25);
}
@media only screen and (max-width: 700px) {
.item {
width: 100%;
}
.container {
display: block;
height: 100%;
}
} <div class="container">
<div class="item">
<h3 class="title">Item 1</h3>
<div class="content">
<p>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit. <br><br> Praesent fringilla orci vitae ligula ultrices finibus a id risus. Praesent sed quam pharetra, pulvinar diam iaculis, condimentum eros. Duis accumsan rutrum aliquam. Donec id quam odio. Pellentesque euismod lectus eget sem luctus dapibus. Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh pretium in.</p>
</div>
</div>
<div class="item">
<h3 class="title">Item 2</h3>
<div class="content">
<p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p>
</div>
</div>
<div class="item">
<h3 class="title">Item 3</h3>
<div class="content">
<p>No</p>
</div>
</div>
<div class="item">
<h3 class="title">Item 4</h3>
<div class="content">
<p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.<br>Ut id cursus ligula, sit amet pharetra nisi. Proin in orci vitae ipsum suscipit laoreet ac at risus. Nullam convallis nibh a tortor volutpat, at maximus justo pharetra. Donec eros tellus, scelerisque at mauris non, mollis mollis velit.</p>
</div>
</div>
<div class="item">
<h3 class="title">Item 5</h3>
<div class="content">
<p>Vestibulum sit amet velit feugiat, bibendum arcu interdum, auctor quam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse porttitor dapibus vehicula. Vivamus scelerisque metus lectus, vel cursus nibh on pretium in.</p>
</div>
</div>
</div>