html - 新开发者和我的 figcaption 错误,我不知道为什么
问题描述
提前对不起我的英语,
我必须复制这个原件
但我这样做:我的解决方案
这是我的代码:
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 会那样移动。
我提前谢谢你。
解决方案
像这样改变你的 IMG 风格
div.psp div.picture-left img {
width: 100%;
margin-right: 1em;
float:left;
}
.picture-left
然后像这样添加css类
.picture-left {
width:45%;
}
.psp
然后像这样添加CSS类
.psp{
display: flex;
}
试试这个如果你有任何疑问评论我
并且不要在公共平台帖子上使用坏话✌</p>
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>
推荐阅读
- pdf - 创建 PAdES 签名
- regex - 在彼此的一组字节数内查找 3 个特定字节值
- php - 使用laravel错误登录(post json url)时如何处理
- python - 如何将文件中的数字添加到列表中?
- javascript - 如何通过 JavaScript 从 SVG 元素中清除文本
- uwp - co_await 表达式需要一个合适的“await_ready”函数,但没有找到
- r - 如何根据列中的字符串在df中输入几个空行
- spring - Spring boot 2 + Oauth2 - 保护微服务中的其余调用
- java - 声纳短活分支扫描失败并出现空指针异常
- php - 数量不更新