Добавление изображения логотипа рядом с текстом в div с использованием html и css

Я пытаюсь сделать верхнюю панель только с именем или текстом примера с левой стороны, а логотип группы (изображение png) выровнен с правой стороны. Но текст и изображение находятся в одном и том же разделе, а изображение и текст должны быть в одной строке, что у меня сейчас есть.

<html>
    <head>
        <title>Example</title>
        <link rel = "stylesheet" href = "index.css">
    </head>
    <body>
        <div class = "topBar">
            <p class = "topBar-Text">Example Text</p>
            <img class = "groupIcon" src = "resources/groupIcon.png" width = "100" height = "100">
        </div>
    </body>
</html>

в html и

.topBar {

    background-color: seashell;
    padding: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;

}

.topBar-Text {

    margin-left: 30px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;

}

.groupIcon {

    float: right;

}

В CSS, но float: right; удаляет изображение из раздела и не находится в той же строке, что и текст, но выравнивает изображение по правому краю. скриншот Итак, как я могу сделать так, чтобы изображение было выровнено по правому краю, внутри раздела и в той же строке, что и текст вот так

html css

13.12.2020 08:52

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

900

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать flexbox в классе topBar.

.topBar {
    display: flex;
    justify-content: space-between;
}

13.12.2020 08:58

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

Когда динамически добавленный div удаляется, последний созданный div следует за ним

Невозможно импортировать сгенерированный шрифтом css в React

Какие технологии используются в редакторе Canva

Как повернуть весь текст на х градусов по оси х в Javascript

Как редактировать live css с помощью tampermonkey без Amino: Live CSS Editor

Можем ли мы использовать проценты в клипе css?

Тег стиля в Flask не отображает цвет текста

Как убрать левую белую рамку моего сайта

Проверка последнего элемента с двойным щелчком с помощью jQuery

Как я могу исправить среднюю колонку без заполнения?

Добавление изображения логотипа рядом с текстом в div с использованием html и css

Ответы 1

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

Похожие вопросы