文本、图片和视频显示在我的flexboxes后面

Question

各位程序员！

我是一个初学者，正在学习HTML和CSS。我的问题是，当我试图插入文本、视频或图片时，它会出现在flexboxes的后面。我尝试了不同的方法，比如overflow: auto，visible，hidden。一些文本显示在flexboxes后面或下面，可见。

​

/* Responsive grid */
.layout {
    padding: 24px;
}

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -12px;
}

.grid article {
    margin-bottom: 24px;
}

.grid article > div {
    height: 0;
    padding-top: 56.25%;
    background-color: rgb(103, 103, 199);
    overflow: hidden;
    margin: 0 12px;
}

.grid-2 article {
    width: 50%;
}

.grid-2-1 article {
    width: 33.333332%;
}

.grid-2-1 article > div {
    padding-top: 100%;
    background-color:darkgoldenrod;
}

.grid-2-1 article:nth-child(2n+1) {
    width: 66.666667%;
}

.grid-2-1 article:nth-child(2n+1) > div {
    padding-top: 50%;
}

.grid-3 article {
    width: 33.33332%;
}

.grid-4 article {
    width: 25%;
}

.grid-3 article > div {
    background-color: rgb(231, 153, 64);
}

.grid-2 article > div {
    background-color: rgb(52, 165, 80);
}

@media screen and (max-width: 768px) {
    .grid-4 article {
        width: 50%;
    }
}

<main class="layout">
  <div class="grid grid-4">
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
  </div>

  <div class="grid grid-2">
    <article><div></div></article>
    <article><div></div></article>
  </div>

  <div class="grid grid-3">
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
  </div>

  <div class="grid grid-2-1">
    <article><div></div></article>
    <article><div></div></article>
  </div>

​

Answer 1

在.grid文章>目录中添加一个固定的高度。这是因为你添加了顶部填充，当你试图插入文本/图像时，它会自动向下移动到另一个网格。这就是为什么你看不到image/text/的原因。

​

/* Responsive grid */
.layout {
    padding: 24px;
}

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -12px;
}

.grid article {
    margin-bottom: 24px;
    height: auto;
}

.grid article > div {
    background-color: rgb(103, 103, 199);
    overflow: hidden;
    margin: 0 12px;
    text-align: center;
    height: 100px;
}

.grid-2 article {
    width: 50%;
}

.grid-2-1 article {
    width: 33.333332%;
}

.grid-2-1 article > div {
    padding-top: 100%;
    background-color:darkgoldenrod;
}

.grid-2-1 article:nth-child(2n+1) {
    width: 66.666667%;
}

.grid-2-1 article:nth-child(2n+1) > div {
    padding-top: 50%;
}

.grid-3 article {
    width: 33.33332%;
}

.grid-4 article {
    width: 25%;
}

.grid-3 article > div {
    background-color: rgb(231, 153, 64);
}

.grid-2 article > div {
    background-color: rgb(52, 165, 80);
}

@media screen and (max-width: 768px) {
    .grid-4 article {
        width: 50%;
    }
}

<main class="layout">
  <div class="grid grid-4">
    <article><div><p>Hellow</p></div></article>
    <article><div><img src="https://via.placeholder.com/140x100"></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
    <article><div></div></article>
  </div>
</main>

​