如何在图片下同一个<figure>添加文字？

Question

所以，这是我的代码，但问题是文本在图像的右侧，但不在图像下方。如何正确添加？

figure { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
}

figure img {
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure>
            <img src="img/books/2019/Rhonda Byrne - Paslaptis.jpg" alt="Rhonda Byrne - Paslaptis"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html>

Answer 1

您可以简单地从图中的 css 中删除 display: grid;。就像这样：

 figure {
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     grid-gap: 20px;
     align-items: stretch;
     text-align: justify;
 }

Answer 2

body { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
 }
figure > img {
  display: block;
  margin-bottom: 4px;
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}
figcaption {
  width: auto;
  text-align: center;
  margin: 5px auto;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure>
            <img src="http://via.placeholder.com/640x360" alt="Rhonda Byrne - Paslaptis"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html>

Answer 3

您不必想出网格系统来做到这一点。这是一个简单的 varainte，可以满足您的需求。

figure { 
  grid-gap: 20px;
  align-items: stretch;
  text-align: justify;
}
img {
  width: 200px;
}
figure img {
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px  rgba(0,0,0,0.6);
  max-width: 100%;
}
.figcaption {
    display: block;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Web</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <figure class="item">
            <img src="http://via.placeholder.com/640x360" alt="Rhonda Byrne - Paslaptis"/>
            <figcaption>Rhonda Byrne - Paslaptis</figcaption>
        </figure>
    </body>
</html

Answer 4

使图形显示为 flex 即可。

这是一个简单的例子。

* {
  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

figure {
  display: flex;
  flex-flow: column;
}

figure img {
  border: 1px solid #000;
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.6);
  max-width: 100%;
  width: 100vw;
}

<!DOCTYPE html>
<html>

<head>
  <title>Web</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <figure>
    <img src="https://picsum.photos/id/1016/300/300" alt="A view" />
    <figcaption>Rhonda Byrne - Paslaptis</figcaption>
  </figure>
</body>

</html>

如何在图片下同一个<figure>添加文字？

How to add text to the same <figure> under the image?

html

css

figure