javascript - 如何将元素移动到新行？html/css
问题描述
我希望我要添加的元素之一从新行开始。具体来说，我正在尝试添加一个新的项目卡，但是每当我添加它时，该元素不会从新行开始，而是会缩小其他项目卡，并且它们都在同一行。
例如，这是项目的原始代码：
@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>所以我想添加另一张项目卡，但这次它应该从新行开始或从第一张卡下开始
我尝试了什么：
@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 Link，如果你想玩更多。
推荐阅读
- node.js - 如何在 postgres 中进行多个查询
- ios - 当检测到的图像在 AR 中消失时，如何停止 videoNode？
- python - 如何使它成为帕斯卡三角形。表示第一行是 1，然后是第二行是 1,1，第三行是 1,2,1
- amazon-web-services - 从客户端调用 API 时出现错误代码 500
- omnet++ - Omnetpp.ini - 如何为主机参数创建循环
- android - 如何为 Facebook 登录设置登台和生产应用程序？
- c# - 如何在数据库c#中保存标签
- python - Python：Selenium：如何编写尝试 - 除了再次尝试迭代的代码
- emacs - Emacs org-mode latex - 只需在 pdflatex、xelatex 和 lualatex 之间切换
- r - 如何更改条形图中的 ggplot2 x 轴值？