如何水平并排列出 3 个 Div 元素？

Question

我有 3 个 div 包含基本相同的信息。每个 div 由一个 image/header/paragraph 组成。 div 中的每个标签 (IMG/Header/Paragraph) 应在彼此下方列出，以便我们在图像下方看到图片、图片标题以及标题下方关于图片的一些文本。每个 div 只是有一个不同的 class 名称，column1/column2/column3

每个 div 应该在一行中从左到右并排列出，但我似乎做错了。有人可以帮忙吗？

#portraitGrid {
  max-width: 30%;
  display: inline-block;
  background-color: #ff99cc;
}

.column1 {
  float: left;
  background-color: #ff99cc;
}

<div id="portraitGrid" class="column1">
    <img id="portfolioPortrait" class="portraitImage" src="Images/Humming 2.jpeg" />
    <br />
    <br />
    <h3 id="portfolioPortrait" class="title">Humming Bird</h3>
    <p>
        The Humming Bird portrait was inspired by a card made for my boyfriend. The theme of this was to have make something romantic in a cute, simple, yet bold. Framed in a black shadow box, the color and designs stand out even stronger.
    </p>
</div>

Answer 1

您应该将“列”包装成 div。在这种情况下，它们将被称为 grid-card。通过在容器 #portaitGrid 上使用 grid-template-columns: repeat(3, 1fr); 应用网格系统。 `repeat(3, 1fr) 会将 space 分成宽度完全相同的 3 列。

要在卡片之间添加间隙，您可以使用 grid-gap。

在你的图片中，标题和图像比文本块小。因此，我只给了它们 80% 的宽度（卡片宽度的 80%）并将它们居中。

正如我在评论中所说的那样，2x
是一种不好的用法。因此，我删除了换行符并在图像中添加了 margin-bottom。

body {
  margin: 0;
}

#portraitGrid {
  display : grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  background-color: #ff99cc;
  padding: 15px;
}

#portraitGrid div img {
  width: 80%;
  margin: 0 10% 1em 10%;
}

#portraitGrid div h3 {
  width: 80%;
  text-align: center;
  background-color: black;
  color: white;
  margin: 0 auto;

<section id="portraitGrid">
  <div>
    <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
    <h3>Hamster</h3>
    <p>My name is Yoshi. I'm a syrian hamster. My picture is often used for demonstration purpose at Whosebug by my owner.
    </p>
  </div>
  <div>
    <img src="https://www.tacoshy.de/Images/Yoshi/IMAG0736.jpg">
    <h3>Food</h3>
    <p>I enjoy eating water-melons.</p>
  </div>
  <div>
    <img src="https://www.tacoshy.de/Images/Areno/IMAG0845.jpg">
    <h3>Hobbies</h3>
    <p>My favorite hobby is sleeping during daytime
    </p>
  </div>
</section>

如何水平并排列出 3 个 Div 元素？

How do I list 3 Div elements next to each other horizontally?

html

css

grid