新开发者和我的 figcaption 错误，我不知道为什么

Question

提前抱歉我的英语，

我必须重现这个original

但我这样做了：my solution

这是我的代码：

div.psp div.picture-left img {
    
    width: 45%;
    margin-right: 1em;
    float:left;

}



div.psp div.picture-left figure figcaption {
    font-size: .7em;
}

<h2>Put some pictures</h2>
        <div class="psp">
            <div class="picture-left">
                <figure>
                    <img src="images/cat.jpg" title="A nice and cute cat" alt="white and gray cat looking at you, with his yellow and green eyes" />
                    <figcaption>A cat, just to keep the context of the website.</figcaption>
                </figure>
            </div>
            <div class="tleft">
                <p>
                    We're not looking at a novel by Stephenie Meyer, this is a <span class="mfw">motherfuckingwebsite</span>.
                    Add some relevant pictures to give a little bit of context, or to cheer up the reader.
                    Do you really like to waste the power of technology that we have nowadays? Come on, you're using a
                    web browser on a computer, you're not reading a book on a Kindle.
                </p>

                <p>The website shouldn't be overfilled with pictures, but it should make the user happy while reading your nonsense words.</p>

                <p>You see the picture of this cute cate? He's happy, and you should be too.</p>
            </div>
        </div>

我不知道为什么我的 figcaption 会那样移动。

先谢谢你了。

Answer 1

发生这种情况是因为您将图像向左浮动。

这就是它偏向一边的原因。

只是不要 select img 标签，像这样：

div.psp div.picture-left { /* <---- Just remove the img */
    
    width: 45%;
    margin-right: 1em;
    float:left;

}



div.psp div.picture-left figure figcaption {
    font-size: .7em;
}

Answer 2

像这样更改您的 IMG 样式

div.psp div.picture-left img {
    
    width: 100%;
    margin-right: 1em;
    float:left;

}

然后添加 css class .picture-left 像这样

.picture-left {
width:45%;
}

然后像这样添加CSSclass.psp


.psp{
    display: flex;
}

如果您有任何疑问，请尝试此评论我

并且不要在 public 平台帖子上使用脏话✌

div.psp div.picture-left img {
    
    width: 100%;
    margin-right: 1em;
    float:left;

}

.picture-left {
width:45%;
}
.psp{
    display: flex;
}

div.psp div.picture-left figure figcaption {
    font-size: .7em;
}

<h2>Put some pictures</h2>
<div class="psp">
<div class="picture-left">
  <figure>
<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" title="A nice and cute cat" alt="white and gray cat looking at you, with his yellow and green eyes" />
<figcaption>A cat, just to keep the context of the website.</figcaption>
</figure>
</div>
<div class="picture-left">
<p>
We're not looking at a novel by Stephenie Meyer, this is a <span class="mfw">motherfuckingwebsite</span>.
                    Add some relevant pictures to give a little bit of context, or to cheer up the reader.
                    Do you really like to waste the power of technology that we have nowadays? Come on, you're using a
                    web browser on a computer, you're not reading a book on a Kindle.
                </p>

                <p>The website shouldn't be overfilled with pictures, but it should make the user happy while reading your nonsense words.</p>

                <p>You see the picture of this cute cate? He's happy, and you should be too.</p>
            </div>
            </div>

新开发者和我的 figcaption 错误，我不知道为什么

New dev, and my figcaption bug, and i dont know why

html

figure

figcaption