CSS网格跨度重叠，无法进行内联
CSS网格跨度重叠，无法进行内联
提问于 2018-06-21 07:15:12
在我的项目组合网站上，我有指示我的项目的方框。当它显示每个项目使用的语言时，它们似乎完全重叠，并且不能调整以适应其分配的div中的所有语言，同时保持技能部分和“访问站点”按钮的顺序，有人知道为什么吗？
链接到有问题的网站，请随时查看代码: HTML
<article class="project-card">
<div class="project4img" ></div>
<div class="project1-header">
<h5 class="project1">Template 2</h5>
<h6 class="development">Development start date: 03/06/2018"</h6>
<p>Started inplimenting CSS Grid for a more easy responsive layout. Also includes vue.js and vanilla js.</p>
</div>
<div class="bottomSection">
<div class="skillSection">
<span class="skill">HTML</span>
<span class="skill">CSS</span>
<span class="skill">JAVASCRIPT</span>
<span class="skill">VUE.JS</span>
</div>
<div class="visitSite"><a class="visitProject1" href="https://donnieberry97.github.io/project2/">Visit Site</a></div>
</div>
</article>CSS
.skill {
border-radius: 4px;
border: 2px solid #92eac0;
padding: 8px;
margin-right: 10px;
margin-bottom: 10px;
font-family: Camphor, Open Sans, Segoe UI, sans-serif;
font-size: .85em;
color: #525f7f;
}
.bottomSection {
padding: 3em 3em;
box-sizing: border-box;
display: grid;
grid-template-columns: 50% 50%;
}
.visitSite {
text-align: right;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-21 08:24:47
在这种情况下，flexbox可以很好地工作。
而不是使用网格：
.bottomSection {
align-items: center;
display: flex;
justify-content: space-between;
}
.skillSection {
display: flex;
flex-wrap: wrap;
max-width: 50%; // Or whatever width you want here...
}这是JSFiddle
Stack Overflow用户
发布于 2018-06-21 07:25:09
只有网格的直接子项是网格项，因此您的span.skill不是div.bottomSection的直接子项，因此您没有在它们上设置样式来正确对齐它们。
因此，您可以在div.skillSection上设置网格，其中有4列，每列有1fr。
.skill {
border-radius: 4px;
border: 2px solid #92eac0;
padding: 8px;
margin-right: 10px;
margin-bottom: 10px;
font-family: Camphor, Open Sans, Segoe UI, sans-serif;
font-size: .85em;
color: #525f7f;
}
.bottomSection {
padding: 3em 3em;
box-sizing: border-box;
display: grid;
grid-template-columns: 50% 50%;
}
.bottomSection>.skillSection {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.visitSite {
text-align: right;
}<article class="project-card">
<div class="project4img"></div>
<div class="project1-header">
<h5 class="project1">Template 2</h5>
<h6 class="development">Development start date: 03/06/2018"</h6>
<p>Started inplimenting CSS Grid for a more easy responsive layout. Also includes vue.js and vanilla js.</p>
</div>
<div class="bottomSection">
<div class="skillSection">
<span class="skill">HTML</span>
<span class="skill">CSS</span>
<span class="skill">JAVASCRIPT</span>
<span class="skill">VUE.JS</span>
</div>
<div class="visitSite"><a class="visitProject1" href="https://donnieberry97.github.io/project2/">Visit Site</a></div>
</div>
</article>
作为附注，当在CSS grid中定义列时，请考虑使用fr单位而不是%，就像grid-template-columns: 50% 50%;一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50958303
复制相关文章
相似问题