Новый разработчик и моя ошибка с 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 так двигаются.

Я благодарю вас заранее.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
31
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это произошло потому, что вы переместили изображение влево.

Вот почему это идет на сторону.

Только не выбирайте тег 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;
}

Ой ну спасибо ! Это работа, и теперь я понимаю, почему! Большое спасибо, что спасли меня!

MJoestar 05.04.2021 18:10

Хорошо, кстати, почему ты не принимаешь мой ответ?

Blaze_droid 05.04.2021 18:21

Ха-ха, извини, я новичок на этом сайте!

MJoestar 06.04.2021 17:56

Но вы приняли ответ @ Gajarthan, а не мой ??? : - /

Blaze_droid 07.04.2021 14:17

@Blaze_droid ???

Gajarthan 08.04.2021 14:28
Ответ принят как подходящий

измените свой стиль 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>

Другие вопросы по теме