Html CSS-flex:Third";卡片“;除了前两个,我希望它在下面
我有一个棘手的问题,想听听你的意见。如果已经回答了,我道歉。我研究过类似的问题,并尝试过解决方法,但我找不到适合我的方法 我现在正在一个个人网站上工作,我有自己喜欢的主页,但我正在努力让体验页面正确显示。现在,我正在尝试拥有3-4张“卡片”的内容。前两个应并排出现在主要部分,第三个(如有必要,第四个)应显示在其下方,如下所示“ 1 2 3(居中,理想情况下为前两项的宽度) 或 1 2 34 目前,无论我尝试什么(清除、更改弯曲方向等),我都会将以下项目压在一起 1 2 3 我已经附上了我的full styles.css(我为混乱道歉),希望有比我聪明的人能帮助我解决这个问题,还有我的HTML代码片段,这样你就可以了解我是如何使用它的 提前非常感谢你 Styles.cssHtml CSS-flex:Third";卡片“;除了前两个,我希望它在下面,html,css,flexbox,Html,Css,Flexbox,我有一个棘手的问题,想听听你的意见。如果已经回答了,我道歉。我研究过类似的问题,并尝试过解决方法,但我找不到适合我的方法 我现在正在一个个人网站上工作,我有自己喜欢的主页,但我正在努力让体验页面正确显示。现在,我正在尝试拥有3-4张“卡片”的内容。前两个应并排出现在主要部分,第三个(如有必要,第四个)应显示在其下方,如下所示“ 1 2 3(居中,理想情况下为前两项的宽度) 或 1 2 34 目前,无论我尝试什么(清除、更改弯曲方向等),我都会将以下项目压在一起 1 2 3 我已经附上了我的ful
/* Global Layout Set-up */
{
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
text-align: center;
font-family: 'Roboto', sans-serif;
color: #222;
background: #f7f5f0;
}
/* Link Styles */
a {
text-decoration: none;
color: #0499ff;
}
a:hover {
color: #6633ff;
}
/* Section Styles */
.main-nav {
width: 100%;
background: black;
min-height: 30px;
padding: 10px;
position: fixed;
text-align: center;
margin: auto;
}
.nav {
display: flex;
justify-content: space-around;
font-weight: 700;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
.nav .name {
display: none;
}
.nav li {
padding: 5px 10px 5px 10px;
}
.nav a {
transition: all .5s;
}
.nav a:hover {
color: white
}
header {
text-align: center;
background: url('images/realrocket5.jpg') no-repeat top center ;
background-size: cover;
overflow: hidden;
padding-top: 60px;
}
header {
line-height: 1.5;
}
header .profile-image {
margin-top: 50px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 3px solid black;
transition: all .5s;
}
header .profile-image:hover {
transform: scale(1.2) rotate(360deg);
}
.tag {
background-color: #efefef;
color: black;
padding: 10px;
border-radius: 5px;
display: table;
margin: 10px auto;
}
.location {
background-color: #222;
color: white;
}
.card {
float: left;
max-width: 40%;
margin: 30px;
padding: 20px 40px 20px;
text-align: left;
background: #fff;
border-bottom: 4px solid #ccc;
border-radius: 6px;
}
.card-below{
float: left;
margin: 30px;
padding: 20px 40px 40px;
text-align: left;
}
.card:hover {
border-color: #0399ff;
}
ul.skills {
padding: 0;
text-align: center;
}
.skills li {
border-radius: 6px;
display: inline-block;
background: #ff9904;
color: white;
padding: 5px 10px;
margin: 2px;
}
.skills li:nth-child(odd) {
background: #0399ff;
}
footer {
width: 100%;
min-height: 30px;
padding: 20px 0 40px 20px;
}
footer .copyright {
top: -8px;
margin-right: 20px;
font-size: .75em;
}
footer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
footer ul li {
display: inline-block;
}
a.social {
display: inline-block;
text-indent: -9999px;
margin-left: 5px;
width: 30px;
height: 30px;
background-size: 30px 30px;
opacity: .5;
transition: all .25s;
}
a.twitter {
background-image: url(images/twitter.svg);
}
a.linkedin {
background-image: url(images/linkedin.svg);
}
a.github {
background-image: url(images/github.svg);
}
a.social:hover {
opacity: 1;
}
.clearfix {
clear: both;
}
/* Styles for larger screens */
@media screen and (min-width: 720px) {
.flex {
display: flex;
max-width: 1200px;
justify-content: space-around;
margin: 0 auto;
}
.flex-column {
flex-direction: column;
}
header {
min-height: 450px;
}
.nav {
max-width: 1200px;
}
.nav .name {
display: inline-block;
border: solid #2204ba 3px;
border-radius: 15px;
background-color: #222;
margin-right: auto;
margit-left: left;
text-align: center;
color: #0399ff;
}
.nav .navbar {
display: inline-block;
border: solid #2204ba 3px;
border-radius: 15px;
background-color: #222;
margin-right: 5px;
text-align: center;
color: #0399ff;
}
main {
padding-top: 50px;
}
main p {
line-height: 1.6em;
}
footer {
font-size: 1.3em;
max-width: 1200px;
margin: 40px auto;
}
}
h3 {
color: black;
letter-spacing: 0.5px;
}
.card-title {
text-align: center;
border: solid black 3px;
border-radius: 10px;
background-color: #222;
color: white;
}
HTML
卡片1
东西在这里,高达500像素宽
卡片2
更多的东西在这里可以达到500像素宽
卡片3
问题卡。这些东西需要在它自己的卡中的卡1下面
如果我每页只使用两张卡片,它们会正确地并排显示。当我尝试添加第三张卡片时,它只会出现在最后一张卡片旁边,我一辈子都不知道如何将它放在下面。理想情况下,如果使用三张卡片,前两张将并排居中,那么第三张卡片将居中,与前两张卡片的宽度相同组合。如果使用第四张卡,我希望它基本上是正方形。非常感谢您的任何输入!!
.wrap{
宽度:500px;
背景:灰色;
保证金:自动;
填充:10px;
边缘底部:20px;
}
.行{
显示器:flex;
证明内容:中心;
}
.盒子{
填充:20px;
背景:黄色;
最小宽度:75px;
柔性生长:1;
保证金:2倍;
文本对齐:居中;
}
方框一
方框二
方框三
方框一
方框二
方框三
方框四
.wrap{
宽度:500px;
背景:灰色;
保证金:自动;
填充:10px;
边缘底部:20px;
}
.行{
显示器:flex;
证明内容:中心;
}
.盒子{
填充:20px;
背景:黄色;
最小宽度:75px;
柔性生长:1;
保证金:2倍;
文本对齐:居中;
}
方框一
方框二
方框三
方框一
方框二
方框三
方框四
在flex容器上设置一个flex-wrap:wrap
?可能还需要在其上设置一个最大宽度。谢谢,我会尝试!无可否认,我已经有一段时间没有使用CSS了,我刚刚开始使用它,所以很多这对我来说都是新东西。哇!非常感谢!修复了它!!!在flex容器上设置一个flex-wrap:wrap
?可能还需要设置一个最大宽度。谢谢,我会试试的!承认我已经有一段时间没有使用CSS了,我现在才开始使用它,所以很多东西对我来说都是新的。哇!非常感谢!这已经解决了!!!我现在不能升级这个,因为这是一个新的帐户,但解决方案是有效的。也许你将来可以你也可以再次在问题中找到价值。享受Stack!在这个网站上找到你认为有用的答案。没有义务。只有一种提升质量内容的方法。欢迎使用Stack Overflow!我目前无法对此进行更新,因为这是一个新帐户,但解决方案是有效的。也许你将来也可以从中找到价值他又问了一个问题。享受Stack!对于这个网站上你觉得有用的答案,。没有义务。只有一种方法可以推广高质量的内容。欢迎来到Stack Overflow!
<main class="flex">
<div class="card">
<h2 class="card-title">Card1</h2>
<p>Stuff goes here, up to 500px wide</p>
</div>
<div class="card">
<h2 class="card-title">Card2</h2>
<p>More stuff goes here up to 500px wide</p>
</div>
<div class="card">
<div class="flex-column">
<h2 class="card-title">Card3</h2>
<p>The problem card. This stuff needs to go below card one in its own card.</p>
</div>
</div>
</main>