Question

在我的投资组合网站上，有一些框表示我的项目。在显示每个项目使用的语言的地方，它们似乎完全重叠，并且在保持技能部分和“访问站点”按钮保持一致的同时，不会进行调整以使其适合分配的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;
}

Answer 1

只有网格的直接子元素是网格项目，因此您的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网格中定义列时考虑使用fr单位而不是%，像grid-template-columns: 50% 50%;

Answer 2

在这种情况下，flexbox可以很好地工作。

完全不使用网格：

void KinectCapture::GetColorFrame(IMultiSourceFrame* pMultiFrame)
{
IColorFrameReference* pColorFrameReference = NULL;
IColorFrame* pColorFrame = NULL;
pMultiFrame->get_ColorFrameReference(&pColorFrameReference);
HRESULT hr = pColorFrameReference->AcquireFrame(&pColorFrame);
// test CHien
if (!SUCCEEDED(hr))
{
    int test = 1;// never happened (Correct!)
}
if (SUCCEEDED(hr))
{

}

SafeRelease(pColorFrame);
SafeRelease(pColorFrameReference);
}

这是JSFiddle

CSS网格-跨度重叠，无法内嵌

2 个答案: