我正在尝试为我的学校新闻频道创建一个网站,并且正在为每个演职人员制作个人资料卡。
不过,现在,卡对齐的方式很奇怪,它只停留在前40%的百分比中,我找不到导致它的任何东西。
Here's a screenshot about what I'm talking about
您会看到那些上面写着John Doe的白卡,以及它们在左侧的情况如何?是的,我正在尝试使其填满整个页面,但是我正在做的任何事情都没有起作用
如果有人需要,这里是所有代码。卡本身在“ section”标签中,在各自的div标签中:
body {
margin: 0px;
background: -webkit-linear-gradient(left top, #092f6e, #0093FF);
background: -o-linear-gradient(bottom right, #092f6e, #0093FF);
background: -moz-linear-gradient(bottom right, #092f6e, #0093FF);
}
color: #f7f7f7;
font-family:"Swis721 Lt BT",
sans-serif;
font-weight: 300;
}
#header {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#video {
position: absolute;
-webkit-filter: saturate(1.25);
filter: saturate(1.25);
}
#MUTV {
position: absolute;
margin-top: 10%;
margin-left: 60%;
max-width: 100%;
width: 10%;
height: 10%;
background-color: #dddddd
}
#headerText {
position: absolute;
color: #FFFFFF;
font-family: "Swis721 Lt BT";
font-size: 35px;
margin-top: 10%;
margin-left: 7.5%
}
#headerTextContainer {
width: 50%;
height: 50%;
max-width: 50%;
}
.navContainer {
margin: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
margin-top: 27%;
}
.button {
font-family: "Swis721 Lt BT";
font-size: 150%;
color: #ffffff;
text-decoration: none;
width: 10%;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
border: 2px solid #f7f7f7;
text-align: center;
position: relative;
overflow: hidden;
-webkit-transition: .5s;
transition: .5s;
}
.button:after {
position: absolute;
-webkit-transition: .5s;
transition: .5s;
content: '';
width: 0;
left: 50%;
bottom: 0;
height: 3px;
background: #f7f7f7;
height: 120%;
left: -10%;
-webkit-transform: skewX(20deg);
-ms-transform: skewX(20deg);
transform: skewX(20deg);
z-index: -1;
}
.button:hover {
cursor: pointer;
color: #008cff;
}
.button:hover:after {
width: 100%;
left: 0% left: -10%;
width: 120%;
}
.active {
font-family: "Swis721 Lt BT";
font-size: 150%;
color: #008cff;
background-color: #ffffff;
text-decoration: none;
width: 18%;
padding: 15px;
border: 2px solid #f7f7f7;
text-align: center;
position: relative;
overflow: hidden;
}
main {
margin-top: 5%
}
section {
display: table-row;
}
.card {
display: table-cell;
background-color: #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
.cardContainer {
padding: 0 16px;
}
.title {
color: grey;
font-size: 18px;
}
<div id="header">
<video id="video" width="100%" autoplay loop>
<source src="This PC/Documents/FahadKhan_FinalProject/Images/Background.mp4"</source>
</video>
<br>
<a href="https://www.youtube.com/channel/UCJTD2hhiUEf9F5TXukZj8PA" target="_blank" id="MUTV">
</a>
<div id="headerTextContainer">
<h1 id="headerText">The guys in front and behind the camera<br>The magic behind it all!</h1>
</div>
</div>
<nav class="navContainer">
<a class="button" href="United TV - Home.html">HOME</a>
<a class="button" href="United TV - News.html">NEWS</a>
<a class="button" href="United TV - About.html">ABOUT</a>
<div class="active">CAST</div>
<a class="button" href="United TV - Contact.html">CONTACT</a>
</nav>
<main>
<section>
<div class="card">
<img src="img.jpg" alt="John" style="width:100%">
<div class="cardContainer">
<h1>John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<br>
</div>
</div>
<br>
<div class="card">
<img src="img.jpg" alt="John" style="width:100%">
<div class="cardContainer">
<h1>John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<br>
</div>
</div>
<br>
<div class="card">
<img src="img.jpg" alt="John" style="width:100%">
<div class="cardContainer">
<h1>John Doe</h1>
<p class="title">CEO & Founder, Example</p>
<p>Harvard University</p>
<br>
</div>
</div>
</section>
</main>
我知道要通读很多东西,但是如果有人可以找到答案,我将不胜感激。谢谢 :)
最佳答案
这是您要实现的目标吗? https://codepen.io/gyerroju/pen/KqgwEr
基本上,我有:
在.card div所在的部分中添加了“ ccontainer”类
.card的显示从表格单元更改为嵌入式块
ccontainer的CSS(和更新的.card类)如下:
.ccontainer {
text-align: center;
display: block;
}
.card {
display: inline-block;
}
请注意,如果没有太大的向后兼容性的问题,除了使用CSS网格和flexbox属性的表格以外,还有其他布局方法。有关布局的更多信息,请参见此处https://css-tricks.com/guides/layout/
该页面上的文章值得一读,并为您提供了哪些可用选项以及可以做什么的观点。
关于html - 个人资料卡无法正确对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44533665/