如何解决我试图并排堆叠卡片，我尝试了以下方法
下面是我认为问题在于解决卡片显示问题的地方
非常感谢您的帮助。
justify-content: space-evenly;
/*flex-start: no* items are stacked to the far left
*space-around:no items are stacked on top of the other*
*padding: no*
space-between no items are stacked to the far left */
/*added
align-content: center;
*/
我想并排堆叠卡片，但是我给了它很多值，但是它仍然无法正常工作，无论是将它排到最左，最右边的中心，还是希望卡片并排对齐。
>非常感谢您。
这是我的style.css
*{
margin: 0;
padding: 0;
font-family: 'Vollkorn',serif;
list-style-type: none;/*Removing the default list-type*/
text-decoration: none; /*Removing the default list-type*/
box-sizing: border-box;
outline: none;
}
/*Decreasing the default size of the html element*/
html{
font-size: 62.5%;
}
/*Creating a css variable to have a global scope*/
:root{
--primary-color: #2b81e4;
--secondary-color: #eee;
--white-color: #fff;
--grey-color: #555;
--light-grey-color: #777;
}
/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
/*To be able to use the css variables we use the keyword var*/
background-color: var(--secondary-color);
margin: 3.5rem;
/*Creating a shadow effect*/
box-shadow: 0 1rem 3rem var(--grey-color);
overflow: hidden;
}
.header{
width: 100%;
/*100vh is 100 percent and I subtract 7rem from all four sides*/
height: calc(100vh-7rem);
background: linear-gradient(rgba(18,113,255,0.5),rgba(18,0.3)),url(images/parachute.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.header-text{
/*text-align: center;*/
text-transform: uppercase;
letter-spacing: 0.1rem;
/*Adding text shadow*/
text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}
.heading{
font-size: 8rem;
color: var(--secondary-color);
/*perspective property defines how far an object is away from the user*/
perspective: 100rem;
}
.header-paragraph{
font-size: 3rem;
font-weight: 500;
color: var(--primary-color);
/*paragraph text too stretched out*/
max-width: 70rem;
/*Center text*/
margin: auto;
}
/*Creating a logo*/
.logo{
position: absolute;
top: 4rem;
right: 4rem;
}
.logo h1{
display: flex;
}
.logo h1 span{
font-size: 2rem;
font-weight: 900;
color: blue;
text-transform: uppercase;
background-color: var(--white-color);
/*Defining the width and height of each letter*/
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1)
{
animation: drop-letters 7s 0.1s infinite;
}
.logo h1 span:nth-child(2)
{
animation: drop-letters 7s 0.2s infinite;
}
.logo h1 span:nth-child(3)
{
animation: drop-letters 7s 0.3s infinite;
}
.logo h1 span:nth-child(4)
{
animation: drop-letters 7s 0.4s infinite;
}
.logo h1 span:nth-child(5)
{
animation: drop-letters 7s 0.5s infinite;
}
.logo h1 span:nth-child(6)
{
animation: drop-letters 7s 0.6s infinite;
}
.logo h1 span:nth-child(7)
{
animation: drop-letters 7s 0.7s infinite;
}
.logo h1 span:nth-child(8)
{
animation: drop-letters 7s 0.8s infinite;
}
.logo h1 span:nth-child(9)
{
animation: drop-letters 7s 0.9s infinite;
}
.logo h1 span:nth-child(10)
{
animation: drop-letters 7s 1.0s infinite;
}
/*Animation keyframes namewhatyouwan*/
@keyframes drop-letters{
0%{
transform: translateY(0);
}
10%{
transform: translateY(0);
}
15%{
transform: translateY(-100%);
}
20%{
transform: translateY(0);
}
100%{
transform: translateY(0);
}
}
.header-image{
width: 35%;
animation: image-float 150s infinite;
}
@keyframes image-float{
0%{
transform: translateZ(40rem);
opacity: 1;
}
40%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70%{
/* translateZ(-1500) means move the move the image even deeper inside
* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.6;
}
80%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
/*Remember 100% has to equal 0% for it to be looping the animation*/
100%{
transform: translateZ(40rem);
opacity: 1;
}
}
.popular-tours{
padding: 5rem 0 10rem 0;
}
.popular-tours-heading{
font-size: 9rem;
text-align: center;
margin-bottom: 9rem;
color: var(--primary-color);
text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}
/*Align the cards side by side*/
.cards-wrapper{
display: flex;
/*even space between each card*/
justify-content: flex-start;
/*Added padding*/
padding: 25px 50px 25px;
align-content: space-between;
}
/*Give each card a specific dimension*/
.card{
width: 30rem;
}
/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
width: 100%;
/*border-radius: topleft topright bottomright bottomleft */
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side{
text-align: center;
background-color: var(--white-color);
/*Make the front-side a bit rounded*/
border-radius: 0.4rem;
/*to positon the child relative to its parent*/
position: relative;
}
.tour-name{
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top:40%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 2rem #000;
}
.card-list{
width:80%;
margin: auto;
/*Create space within the list*/
padding: 2rem 0rem 3rem 0;/
}
.card-list-item{
font-size:1.7rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(--primary-color);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<title>Responsive WebS</title>
</head>
<body>
<div class="container">
<!-- ASSIGNING CSS center to tag-->
<header class="header center">
<div class="header-text">
<h1 class="heading">2526 56837 27736259</h1>
<p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
</div>
<img src="images/parachute.jpg" alt="2526 Image" class="header-Image">
<!--CREATING A LOGO -->
<div class="logo">
<h2>
<span class="center">2</span>
<span class="center">5</span>
<span class="center">2</span>
<span class="center">6</span>
<span class="center">5</span>
<span class="center">6</span>
<span class="center">8</span>
<span class="center">3</span>
<span class="center">7</span>
<span class="center">2</span>
</h2>
</div>
</header>
<!--End of header-->
<section class="popular-tours">
<h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy,non-cryptic and developer-friendly according to 63426</h1>
<!--Wrapper Class of the cards -->
<div class="cards-wrapper">
<!--Creating the first card -->
<div class="card A">
<div class="front-side">
<img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image">
<h1 class="name-of-Pl">The Best PL According To Nelan</h1>
<ul class="card-list">
<li class="card-list-item">MCGA</li>
<li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
<li class="card-list-item">4 Required PL: C,Assembly,Machine Code,Objective-C</li>
<li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
<li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans,C,Compilers,Pintos and Machine Code:$FREE</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,P,MC</button>
</div>
<div class="card B">
<div class="front-side">
<img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image">
<h1 class="name-of-Pl">The Best Artist For Nelan</h1>
<ul class="card-list">
<li class="card-list-item">But I knew you</li>
<li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
<li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
<li class="card-list-item">Goto Song</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans,Pintos and Machine Code:$3</h3>
<button class="card-button">Book Noew To Learn More ABout C,MC</button>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
解决方法
查看此代码段：
*{
margin: 0;
padding: 0;
font-family: 'Vollkorn',serif;
list-style-type: none;/*Removing the default list-type*/
text-decoration: none; /*Removing the default list-type*/
box-sizing: border-box;
outline: none;
}
/*Decreasing the default size of the html element*/
html{
font-size: 62.5%;
}
/*Creating a css variable to have a global scope*/
:root{
--primary-color: #2b81e4;
--secondary-color: #eee;
--white-color: #fff;
--grey-color: #555;
--light-grey-color: #777;
}
/*instead of creating every div for us to center it we will just give every html element a css class of center*/
.center{
display: flex;
justify-content: center;
align-items: center;
}
.container{
/*To be able to use the css variables we use the keyword var*/
background-color: var(--secondary-color);
margin: 3.5rem;
/*Creating a shadow effect*/
box-shadow: 0 1rem 3rem var(--grey-color);
overflow: hidden;
}
.header{
width: 100%;
/*100vh is 100 percent and I subtract 7rem from all four sides*/
height: calc(100vh-7rem);
background: linear-gradient(rgba(18,113,255,0.5),rgba(18,0.3)),url(images/parachute.jpg) center no-repeat;
background-size: cover;
position: relative;
}
.header-text{
/*text-align: center;*/
text-transform: uppercase;
letter-spacing: 0.1rem;
/*Adding text shadow*/
text-shadow: 0 0.3rem 0.5rem var(--light-grey-color);
}
.heading{
font-size: 8rem;
color: var(--secondary-color);
/*perspective property defines how far an object is away from the user*/
perspective: 100rem;
}
.header-paragraph{
font-size: 3rem;
font-weight: 500;
color: var(--primary-color);
/*paragraph text too stretched out*/
max-width: 70rem;
/*Center text*/
margin: auto;
}
/*Creating a logo*/
.logo{
position: absolute;
top: 4rem;
right: 4rem;
}
.logo h1{
display: flex;
}
.logo h1 span{
font-size: 2rem;
font-weight: 900;
color: blue;
text-transform: uppercase;
background-color: var(--white-color);
/*Defining the width and height of each letter*/
width: 3.5rem;
height: 3.5rem;
margin: 0.5rem;
border-radius: 50%;
}
.logo h1 span:nth-child(1)
{
animation: drop-letters 7s 0.1s infinite;
}
.logo h1 span:nth-child(2)
{
animation: drop-letters 7s 0.2s infinite;
}
.logo h1 span:nth-child(3)
{
animation: drop-letters 7s 0.3s infinite;
}
.logo h1 span:nth-child(4)
{
animation: drop-letters 7s 0.4s infinite;
}
.logo h1 span:nth-child(5)
{
animation: drop-letters 7s 0.5s infinite;
}
.logo h1 span:nth-child(6)
{
animation: drop-letters 7s 0.6s infinite;
}
.logo h1 span:nth-child(7)
{
animation: drop-letters 7s 0.7s infinite;
}
.logo h1 span:nth-child(8)
{
animation: drop-letters 7s 0.8s infinite;
}
.logo h1 span:nth-child(9)
{
animation: drop-letters 7s 0.9s infinite;
}
.logo h1 span:nth-child(10)
{
animation: drop-letters 7s 1.0s infinite;
}
/*Animation keyframes namewhatyouwan*/
@keyframes drop-letters{
0%{
transform: translateY(0);
}
10%{
transform: translateY(0);
}
15%{
transform: translateY(-100%);
}
20%{
transform: translateY(0);
}
100%{
transform: translateY(0);
}
}
.header-image{
width: 35%;
animation: image-float 150s infinite;
}
@keyframes image-float{
0%{
transform: translateZ(40rem);
opacity: 1;
}
40%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-500rem) translateX(150rem);
opacity: 0.8;
}
70%{
/* translateZ(-1500) means move the move the image even deeper inside
* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-1500rem) translateX(800rem);
opacity: 0.6;
}
80%{
/* translateX(150rem) means move the image a bit to the right side*/
transform: translateZ(-50rem) translateX(100rem);
opacity: 0.8;
}
/*Remember 100% has to equal 0% for it to be looping the animation*/
100%{
transform: translateZ(40rem);
opacity: 1;
}
}
.popular-tours{
padding: 5rem 0 10rem 0;
}
.popular-tours-heading{
font-size: 9rem;
text-align: center;
margin-bottom: 9rem;
color: var(--primary-color);
text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}
/*Align the cards side by side*/
.cards-wrapper{
display: flex;
/*even space between each card*/
justify-content: flex-start;
/*Added padding*/
padding: 25px 50px 25px;
align-content: space-between;
}
/*Give each card a specific dimension*/
.card{
width: 30rem;
}
/*This will inherit the width from the parent element card and when you want to make corners of an element rounded use border-radius property*/
.card-image{
width: 100%;
/*border-radius: topleft topright bottomright bottomleft */
border-radius: 0.3rem 0.3rem 0 0;
}
.front-side{
text-align: center;
background-color: var(--white-color);
/*Make the front-side a bit rounded*/
border-radius: 0.4rem;
/*to positon the child relative to its parent*/
position: relative;
}
.tour-name{
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top:40%;
right: 1.5rem;
color: var(--white-color);
text-shadow: 0 0 2rem #000;
}
.card-list{
width:80%;
margin: auto;
/*Create space within the list*/
padding: 2rem 0rem 3rem 0;/
}
.card-list-item{
font-size:1.7rem;
font-weight: 500;
color: var(--light-grey-color);
margin: 2rem 0;
border-bottom: 0.1rem solid var(--primary-color);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,700,900&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="style.css"/>
<title>Responsive WebS</title>
</head>
<body>
<div class="container">
<!-- ASSIGNING CSS center to tag-->
<header class="header center">
<div class="header-text">
<h1 class="heading">2526 56837 27736259</h1>
<p class="header-paragraph">43 56837 86 2633 46 2 263 569 53835 244 8463</p>
</div>
<img src="images/parachute.jpg" alt="2526 Image" class="header-Image">
<!--CREATING A LOGO -->
<div class="logo">
<h2>
<span class="center">2</span>
<span class="center">5</span>
<span class="center">2</span>
<span class="center">6</span>
<span class="center">5</span>
<span class="center">6</span>
<span class="center">8</span>
<span class="center">3</span>
<span class="center">7</span>
<span class="center">2</span>
</h2>
</div>
</header>
<!--End of header-->
<section class="popular-tours">
<h1 class="popular-tours-heading">The Most Popular PL according to Nelan is 2. This is because it is easy,non-cryptic and developer-friendly according to 63426</h1>
<!--Wrapper Class of the cards -->
<div class="cards-wrapper">
<!--Creating the first card -->
<div class="card A">
<div class="front-side">
<img src="images/assembly.jpg" width="200" height="200" alt="FAV PL OF 2526" class="card-image">
<h1 class="name-of-Pl">The Best PL According To Nelan</h1>
<ul class="card-list">
<li class="card-list-item">MCGA</li>
<li class="card-list-item">Make C MAndatory to Learn at IS because 63527 Works There</li>
<li class="card-list-item">4 Required PL: C,Assembly,Machine Code,Objective-C</li>
<li class="card-list-item">Incorporate 366745377 BECAUSE 2526 56837 THEM</li>
<li class="card-list-item">Cryptic Difficulty: EASY BECAUSE 63527 56837 THEM</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans,C,Compilers,Pintos and Machine Code:$FREE</h3>
<button class="card-button">Book Noew To Learn More ABout C,A,P,MC</button>
</div>
</div>
<div class="card B">
<div class="front-side">
<img src="images/tswift.jpg" width="200" height="200" alt="FAV ARTIST 2526" class="card-image">
<h1 class="name-of-Pl">The Best Artist For Nelan</h1>
<ul class="card-list">
<li class="card-list-item">But I knew you</li>
<li class="card-list-item">Dancing in your Levi's Drunk under a streetlight,</li>
<li class="card-list-item">I I knew you blabla balbal athis is 63527'S</li>
<li class="card-list-item">Goto Song</li>
</ul>
<button class="navigation-button">
price >>
</button>
</div>
<div class="back-side">
<button class="navigation-button">
<< back
</button>
<h3 class="tour-price">What it costs to go around seeing Nelans,Pintos and Machine Code:$3</h3>
<button class="card-button">Book Noew To Learn More ABout C,MC</button>
</div>
</div>
</div>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
实际上，您忘记为卡A添加</div>。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。