Question

基本上我想在图像下方放置一些文字但不会导致下一个图像的线条中断这就是我现在所拥有的基本上，图像必须像默认情况一样自动保持彼此相邻，但它下面的每个图像都需要有文本。

<html>
<head>
    <title>Card Tracker V1</title>
</head>
<body>
    <img src='./Tarmogoyf.png'>
    <figcaption>You have 0 Tarmogoyf cards.</figcaption>
    <img src='./Tarmogoyf.png'>
    <img src='./Tarmogoyf.png'>
    <img src='./Tarmogoyf.png'>
    <img src='./Tarmogoyf.png'>
</body>

Answer 1

试试这个：

HTML：

<img src='./Tarmogoyf.png'>
<figcaption>You have 0 Tarmogoyf cards.</figcaption>
<img src='./Tarmogoyf.png'>
<figcaption>You have 0 Tarmogoyf cards.</figcaption>
<img src='./Tarmogoyf.png'>
<figcaption>You have 0 Tarmogoyf cards.</figcaption>
<img src='./Tarmogoyf.png'>
<figcaption>You have 0 Tarmogoyf cards.</figcaption>
<img src='./Tarmogoyf.png'>
<figcaption>You have 0 Tarmogoyf cards.</figcaption>

CSS：

img{display:block}

Answer 2

首先，figcaption应该进入一个数字元素。

你可能想要添加一个浮动来让它们浮动。

＆＃13;

figure {
  float: left;
}

＆＃13;

<figure>
  <img src='./Tarmogoyf.png'>
  <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</figure>
<figure>
  <img src='./Tarmogoyf.png'>
  <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</figure>
<figure>
  <img src='./Tarmogoyf.png'>
  <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</figure>
<figure>
  <img src='./Tarmogoyf.png'>
  <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</figure>
<figure>
  <img src='./Tarmogoyf.png'>
  <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</figure>

＆＃13;

Answer 3

<html>
    <head>
        <style type="text/css">
            .img_div { float: left; }
        </style>
    </head>
    <body>
        <div class="img_div">
            <img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" width="100" />
            <figcaption>Caption</figcaption>
        </div>
        <div class="img_div">
            <img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" width="100" />
            <figcaption>Caption</figcaption>
        </div>
        <div class="img_div">
            <img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" width="100" />
            <figcaption>Caption</figcaption>
        </div>
    </body>
</html>

忽略width的{{1}}属性。那只是因为我的样本很大。

Answer 4

尝试使用div

等容器标记创建图像和文本组

<div>
    <img src='./Tarmogoyf.png'>
    <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</div>
<div>
    <img src='./Tarmogoyf.png'>
    <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</div>
<div>
    <img src='./Tarmogoyf.png'>
    <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</div>
<div>
    <img src='./Tarmogoyf.png'>
    <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</div>
<div>
    <img src='./Tarmogoyf.png'>
    <figcaption>You have 0 Tarmogoyf cards.</figcaption>
</div>

CSS将是：

.img-container{float:left; margin:5px}
.img-container .img{display:block;}

您还可以指定图像的高度和宽度以获得相同大小的缩略图

在图像下方显示文本而不会导致中断HTML

4 个答案: