Судя по вашему вопросу, код, который вы используете, не создает ожидаемый блок с картинкой справа и текстом слева. Возможно, конкретной проблемой является неправильное использование элементов HTML или неправильная структура кода.
Для создания блока с картинкой справа и текстом слева, вы можете использовать следующую структуру HTML и соответствующий CSS:
<div class="container"> <img src="your-image.jpg" alt="Your Image" class="image"> <div class="text"> <h2>Title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nisi non turpis ultricies, a dictum purus dictum. Mauris quis vehicula lacus. Integer tincidunt est risus, eu bibendum nulla tincidunt ac.</p> </div> </div>
В этом примере мы обернули картинку и текст внутри общего контейнера с классом "container". Картинке был присвоен класс "image", а тексту - класс "text".
Теперь, чтобы определить позиционирование и стилизацию элементов, вы можете использовать следующий CSS:
.container { display: flex; align-items: center; } .image { width: 50%; margin-right: 20px; } .text { width: 50%; } .text h2 { margin-top: 0; }
В этом примере мы задаем стили для общего контейнера, используя свойство display: flex
, чтобы элементы располагались в одну строку и столбец. align-items: center;
гарантирует, что элементы будут вертикально выравнены по центру.
Затем мы устанавливаем ширину картинки и текста равной 50% каждого элемента, используя класс "image" и класс "text" соответственно. Мы также добавляем небольшой отступ справа для картинки, чтобы создать пространство между картинкой и текстом.
Дополнительно, чтобы убрать отступ сверху у заголовка, мы используем margin-top: 0;
для элемента заголовка <h2>
.
Итак, если вы примените эту структуру кода HTML и стили CSS к вашему проекту, вы должны получить блок с картинкой справа и текстом слева.