在社交媒体上的一篇帖子内容中显示多个图像

Question

我正在使用 django、html、css、jquery 制作一个社交网络网站。

我已经可以将图像上传到数据库并将其显示在我的帖子中，但我想像一样组织它。我怎样才能用 html 和 css 做到这一点？

Answer 1

要使用 HTML 和 CSS 创建图像网格，您可以使用

display:flex

属性作为主容器，并使用

display:grid

来排列图像。这是一个示例实现：

HTML：

<div class="main">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
    repellendus numquam et quia inventore quasi, ea at amet? Repudiandae
    ratione voluptatem velit ut. Quasi tenetur in molestias dolorem
    similique suscipit!
  </p>
  <div class="grid">
    <div class="child1">
      <img src="image-url-1.jpg" alt="Image 1" />
    </div>
    <div class="child2">
      <img src="image-url-2.jpg" alt="Image 2" />
    </div>
    <div class="child3">
      <img src="image-url-3.jpg" alt="Image 3" />
    </div>
    <div class="child4">
      <img src="image-url-4.jpg" alt="Image 4" />
    </div>
  </div>
</div>

CSS（索引.css）：

* {
  box-sizing: border-box;
}
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

img {
    width: 100%;
    height: auto;
  object-fit: cover;
}

.child1 {
  width: 100%;
  grid-area: 1 / 1 / 2 / 4;
}

.child2 {
  width: 100%;
  grid-area: 2 / 1 / 3 / 2;
}
.child3 {
  width: 100%;
  grid-area: 2 / 2 / 3 / 3;
}
.child4 {
  width: 100%;
  grid-area: 2 / 3 / 3 / 4;
}

此代码创建一个响应式图像网格，其中四个图像排列在 3 列布局中。 display: flex 属性用于主容器，而 display: grid 应用于图像网格本身。 CSS 样式可确保图像大小正确并适合其容器。

您可以随意用您自己的内容替换图像 URL 和替代文本。您可以通过修改 grid-template-columns 属性并调整每个图像容器的网格区域来调整网格布局。

请记住根据您的具体要求和设计偏好来调整代码。