我对我的英语提前表示歉意,
我得复制这件原作
但我这样做:我的解决方案
这是我的代码:
null
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>
null
我不知道为什么我字幕会这样移动。
我事先谢谢你。
它很开心,因为你把图像浮到左边。
这就是为什么它在一边。
只是不要选择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;
}