gpt4 book ai didi

javascript - 如何在不破坏垂直对齐的情况下在卡片元素上应用网格以减小浏览器大小?

转载 作者:太空宇宙 更新时间:2023-11-04 09:16:19 25 4
gpt4 key购买 nike

我遇到了这个卡片 UI http://codepen.io/mkurapov/pen/qNQXxz显示三张卡片,如果您缩小浏览器,它会将卡片重新对齐为一条垂直线。

HTML:

<div class="wrap">
<div class="tile">
<img src='https://images.unsplash.com/photo-1464054313797-e27fb58e90a9?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=996&q=80'/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>


<div class="tile">
<img src='https://images.unsplash.com/photo-1458668383970-8ddd3927deed?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1004&q=80'/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>

<div class="tile">
<img src='https://images.unsplash.com/photo-1422393462206-207b0fbd8d6b?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80'/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>


</div>

CSS:

body
{
background-color:#eee
}
.wrap
{
margin:50px auto 0 auto;
width:100%;
display:flex;
align-items:space-around;
max-width:1200px;
}
.tile
{
width:380px;
height:380px;
margin:10px;
background-color:#99aeff;
display:inline-block;
background-size:cover;
position:relative;
cursor:pointer;
transition: all 0.4s ease-out;
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
overflow:hidden;
color:white;
font-family:'Roboto';

}
.tile img
{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
transition: all 0.4s ease-out;
}
.tile .text
{
/* z-index:99; */
position:absolute;
padding:30px;
height:calc(100% - 60px);
}
.tile h1
{

font-weight:300;
margin:0;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2
{
font-weight:100;
margin:20px 0 0 0;
font-style:italic;
transform: translateX(200px);
}
.tile p
{
font-weight:300;
margin:20px 0 0 0;
line-height: 25px;
/* opacity:0; */
transform: translateX(-200px);
transition-delay: 0.2s;
}
.animate-text
{
opacity:0;
transition: all 0.6s ease-in-out;
}
.tile:hover
{
/* background-color:#99aeff; */
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
transform:scale(1.05);
}
.tile:hover img
{
opacity: 0.2;
}
.tile:hover .animate-text
{
transform:translateX(0);
opacity:1;
}
.dots
{
position:absolute;
bottom:20px;
right:30px;
margin: 0 auto;
width:30px;
height:30px;
color:currentColor;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-around;

}

.dots span
{
width: 5px;
height:5px;
background-color: currentColor;
border-radius: 50%;
display:block;
opacity:0;
transition: transform 0.4s ease-out, opacity 0.5s ease;
transform: translateY(30px);

}

.tile:hover span
{
opacity:1;
transform:translateY(0px);
}

.dots span:nth-child(1)
{
transition-delay: 0.05s;
}
.dots span:nth-child(2)
{
transition-delay: 0.1s;
}
.dots span:nth-child(3)
{
transition-delay: 0.15s;
}


@media (max-width: 1000px) {
.wrap {
flex-direction: column;
width:400px;
}
}

我有兴趣了解如何从最初的三张卡片中添加更多卡片,但是如果您向代码中添加更多卡片,它会弄脏卡片并且不再保留其方形设计。

我很好奇,当您减小网络浏览器的大小时,您可以通过哪些方式添加网格而不丢失垂直对齐方式?

最佳答案

您所要做的就是添加一个换行规则:

.wrap
{
margin:50px auto 0 auto;
width:100%;
display:flex;
align-items:space-around;
max-width:1200px;
flex-wrap: wrap; <-- boop
}

https://codepen.io/anon/pen/vgxBQK

关于javascript - 如何在不破坏垂直对齐的情况下在卡片元素上应用网格以减小浏览器大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41747519/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com