заранее извините за мой английский,
Я должен воспроизвести этот оригинал
Но делаю так: мое решение
Вот мой код:
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 { /* <---- Just remove the img */
width: 45%;
margin-right: 1em;
float:left;
}
div.psp div.picture-left figure figcaption {
font-size: .7em;
}
Хорошо, кстати, почему ты не принимаешь мой ответ?
Ха-ха, извини, я новичок на этом сайте!
Но вы приняли ответ @ Gajarthan, а не мой ??? : - /
@Blaze_droid ???
измените свой стиль IMG Вот так
div.psp div.picture-left img {
width: 100%;
margin-right: 1em;
float:left;
}
затем добавьте класс css .picture-left
как это
.picture-left {
width:45%;
}
затем добавьте класс CSS .psp
следующим образом
.psp{
display: flex;
}
попробуйте это, если у вас есть сомнения, прокомментируйте меня
и не используйте плохие слова в сообщениях на публичной платформе✌
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>
Ой ну спасибо ! Это работа, и теперь я понимаю, почему! Большое спасибо, что спасли меня!