我想添加一个元素，从新的行开始。具体来说，我试图添加一个新的项目卡片，但每当我添加时，元素不是从新的行开始，而是缩小其他项目卡片，所有它们都在同一行。
例如，这是项目的原始代码:
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
justify-content: center;
color: white;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-y: auto;
overflow-x: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}<section id="project">
<div class="container" data-aos="fade-up">
<link rel="stylesheet" href="assets/css/projects.css">
<link rel="stylesheet" href="assets/css/text.css">
<div class="section-title">
<h2>My Projects</h2>
<h23>More Coming Soon!</h23>
</div>
<div class="project-container">
<figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94"/>
<figcaption>
<h3>Earth Print</h3>
<p>Do you want to know how COVID-19 has impacted your carbon footprint? Do you want an app that can keep track of your carbon footprint?</p>
<div class="read-more">Read More</div>
<p class="hidden">Earth Print lets you actively gauge your impact on the environment and pushes you to do better. Putting a check on your vehicular emissions and your electricity usage, Earth Print helps you track your carbon footprint and provides a platform for friendly competition to better ourselves as a community. The code uses a simple Express REST API to collect info about the user and Carbon Interface's api to perform calculations and estimate a score of a user's impact on the climate</p>
</figcaption>
</figure>
<figure class="snip1311"><img src="https://i.pinimg.com/474x/0c/b9/b1/0cb9b14c4a5eb45cb54e9089ee066aba.jpg" alt="sample98"/>
<figcaption>
<h3>Classroom Seating Plan</h3>
<p>Do you want a program that automatically sets the seats location for your students, based on alphabetical order? Do you want to save the seatlocation of the students into a different file so that you can refer back to it when needed?</p>
<div class="read-more">Read More</div>
<p class="hidden">A classroom seating plan that allows the user to select the size of their classroom (6x5 or 3x10) and outputs a visual representation of what their classrrom looks like.
The user can then type the number of students in their class, and the names of the students along with their seat location gets saved into a new TextFile
This makes it easier for the user to refer back to the names and seat location, as there is a whole new file with the information.
The user then has a choice to sort the names into alphabetical order and assign seats like that. If the user wants it that way, then the names are sorted into alphabetical order with seat location.
Seat location changes depending on the classroom size the user selects, and the rows and columns reset, accordingly
The user then has the choice to exit the program. If they choose to do so, the program is ended. If they do not want to exit the program, then the program restarts. Created using Java.</p>
</figcaption>
</figure>
<figure class="snip1311"><img src="https://l450v.alamy.com/450v/m67xmp/holiday-sale-online-shopping-concept-woman-holding-credit-card-and-m67xmp.jpg" alt="sample98"/>
<figcaption>
<h3>Cash Register</h3>
<p>Wouldn't you want a program that can deal with both pricing the items as well as applying taxes whenever necessary. Some items do not require taxes, and so my program knows how to exactly deal with that kind of situation.</p>
<div class="read-more">Read More</div>
<p class="hidden">A Cash Register that accepts 5 values, and prompts the user to type out uppercase or lowercase h before or after the value to include the item value in HST tax. The max amount that a user can enter is below $1000 and a positive number, otherwise it would not be included in the totals. After the user types 5 values, the item values are stored in different arrays.
One of them is for HST values only, and the other one is for non-HST values only.
15% tax is then applied to HST values only, and then accordingly, a new item total is provided. A summary total, HST total, and Amount Due are also provided in the end. Created using Java.</p>
</figcaption>
</figure>
</div>
</section>的正下方开始What I tried:
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
display: flex;
justify-content: center;
color: white;
}
figure.snip1311 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
float: left;
overflow-y: auto;
overflow-x: hidden;
margin: 10px 1%;
min-width: 230px;
max-width: 360px;
max-height: 256px;
width: 500rem;
color: #ffffff;
text-align: left;
background-color: #07090c;
font-size: 16px;
-webkit-perspective: 50em;
perspective: 50em;
}
figure.snip1311 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
figure.snip1311 img {
max-width: 110%;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
backface-visibility: hidden;
}
figure.snip1311 figcaption {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: rotateX(90deg) translate(0%, -50%);
transform: rotateX(90deg) translate(0%, -50%);
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
z-index: 1;
opacity: 0;
padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
line-height: 1.5em;
}
figure.snip1311 h3 {
margin: 0;
font-weight: 800;
text-transform: uppercase;
}
figure.snip1311 p {
font-size: 0.8em;
font-weight: 500;
margin: 0 0 15px;
}
figure.snip1311 .read-more {
border: 2px solid #ffffff;
padding: 0.5em 1em;
font-size: 0.8em;
text-decoration: none;
color: #ffffff;
display: inline-block;
}
figure.snip1311 .read-more:hover {
background-color: #ffffff;
color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
opacity: 0;
-webkit-transition-delay: 0;
transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
-webkit-transform: rotateX(0deg) translate(0, -50%);
transform: rotateX(0deg) translate(0, -50%);
opacity: 1;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}<section id="project">
<div class="container" data-aos="fade-up">
<link rel="stylesheet" href="assets/css/projects.css">
<link rel="stylesheet" href="assets/css/text.css">
<div class="section-title">
<h2>My Projects</h2>
<h23>More Coming Soon!</h23>
</div>
<div class="project-container">
<figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94"/>
<figcaption>
<h3>Earth Print</h3>
<p>Do you want to know how COVID-19 has impacted your carbon footprint? Do you want an app that can keep track of your carbon footprint?</p>
<div class="read-more">Read More</div>
<p class="hidden">Earth Print lets you actively gauge your impact on the environment and pushes you to do better. Putting a check on your vehicular emissions and your electricity usage, Earth Print helps you track your carbon footprint and provides a platform for friendly competition to better ourselves as a community. The code uses a simple Express REST API to collect info about the user and Carbon Interface's api to perform calculations and estimate a score of a user's impact on the climate</p>
</figcaption>
</figure>
<figure class="snip1311"><img src="https://i.pinimg.com/474x/0c/b9/b1/0cb9b14c4a5eb45cb54e9089ee066aba.jpg" alt="sample98"/>
<figcaption>
<h3>Classroom Seating Plan</h3>
<p>Do you want a program that automatically sets the seats location for your students, based on alphabetical order? Do you want to save the seatlocation of the students into a different file so that you can refer back to it when needed?</p>
<div class="read-more">Read More</div>
<p class="hidden">A classroom seating plan that allows the user to select the size of their classroom (6x5 or 3x10) and outputs a visual representation of what their classrrom looks like.
The user can then type the number of students in their class, and the names of the students along with their seat location gets saved into a new TextFile
This makes it easier for the user to refer back to the names and seat location, as there is a whole new file with the information.
The user then has a choice to sort the names into alphabetical order and assign seats like that. If the user wants it that way, then the names are sorted into alphabetical order with seat location.
Seat location changes depending on the classroom size the user selects, and the rows and columns reset, accordingly
The user then has the choice to exit the program. If they choose to do so, the program is ended. If they do not want to exit the program, then the program restarts. Created using Java.</p>
</figcaption>
</figure>
<figure class="snip1311"><img src="https://l450v.alamy.com/450v/m67xmp/holiday-sale-online-shopping-concept-woman-holding-credit-card-and-m67xmp.jpg" alt="sample98"/>
<figcaption>
<h3>Cash Register</h3>
<p>Wouldn't you want a program that can deal with both pricing the items as well as applying taxes whenever necessary. Some items do not require taxes, and so my program knows how to exactly deal with that kind of situation.</p>
<div class="read-more">Read More</div>
<p class="hidden">A Cash Register that accepts 5 values, and prompts the user to type out uppercase or lowercase h before or after the value to include the item value in HST tax. The max amount that a user can enter is below $1000 and a positive number, otherwise it would not be included in the totals. After the user types 5 values, the item values are stored in different arrays.
One of them is for HST values only, and the other one is for non-HST values only.
15% tax is then applied to HST values only, and then accordingly, a new item total is provided. A summary total, HST total, and Amount Due are also provided in the end. Created using Java.</p>
</figcaption>
</figure>
<figure class="snip1311"><img src="https://l450v.alamy.com/450v/m67xmp/holiday-sale-online-shopping-concept-woman-holding-credit-card-and-m67xmp.jpg" alt="sample98"/>
<figcaption>
<h3>TEST</h3>
<p>Wouldn't you want a program that can deal with both pricing the items as well as applying taxes whenever necessary. Some items do not require taxes, and so my program knows how to exactly deal with that kind of situation.</p>
<div class="read-more">Read More</div>
<p class="hidden">A Cash Register that accepts 5 values, and prompts the user to type out uppercase or lowercase h before or after the value to include the item value in HST tax. The max amount that a user can enter is below $1000 and a positive number, otherwise it would not be included in the totals. After the user types 5 values, the item values are stored in different arrays.
One of them is for HST values only, and the other one is for non-HST values only.
15% tax is then applied to HST values only, and then accordingly, a new item total is provided. A summary total, HST total, and Amount Due are also provided in the end. Created using Java.</p>
</figcaption>
</figure>
</div>
</section>所以我希望我添加的最后一张牌从新的一行开始，或者从第一张牌的正下方开始。添加display: block;不起作用，因为它将两张牌移动到一行，下两张在后面。
但是我希望这个模式是这样的:一行3张牌，下一行3张牌，以此类推。所以一行最多只能有3张牌有什么建议吗?
看起来你是CSS的新手。虽然，你利用了Flex，但很高兴看到。
现在，在Flex内部，有一个flexbox的集合。为了使您的情况更好，您可以使用flex-wrap属性进行换行。它会根据可用的屏幕宽度自动计算显示项目的空间和数量;
.project-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
color: white;
}
这里是JSFiddle链接，如果你想玩更多