Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/15: Рейтинг темы: голосов - 15, средняя оценка - 4.80
0 / 0 / 0
Регистрация: 24.01.2019
Сообщений: 30

Как разместить картинку и два <span> слева от нее без лишних отступов

05.04.2019, 12:36. Показов 3227. Ответов 1

Студворк — интернет-сервис помощи студентам
Такая проблема , мне нужно расположить картинку слева а два спана справа напротив нее( убрать лишние отступы у спанов и расположить их один под другим , а слева что бы была рядом картинка -логотип). То что сделал я не работает. У меня элементы распологаются в строку.И мне еще нужно прижать элементы без потери их общего взаиморасположения к концу блока(к правой его стороне).Что бы все было красиво и адаптивно.Прикрепил картинку того Как вышло у меня!

HTML5
1
2
3
4
5
6
класс header-top ==>
 <div class="logo">
     <img src="https://www.cyberforum.ru/images/logo.png"></img>
           <span class="logo-name">PRINTE</span>
     <span class="logo-bottom">Ваша типография</span>
  </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.header-top .logo .logo-name {
  font-family: Proxima Nova;
  font-size: 48px;
  color: #1AB0CE;
  vertical-align: top;
  display: inline-block;
 
 
}
.header-top .logo .logo-bottom {
  font-family: Proxima Nova;
  font-size: 15px;
  color: #3A4047;
  line-height: 20px;
  display: inline-block;
 
    
 
}
Вот как выходит у меня ===>

0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
05.04.2019, 12:36
Ответы с готовыми решениями:

Разместить форму слева, картинку справа
Есть форма связи и картинка, нужно расположить их горизонтально. Картинка, если заключить все это дело в дивы, убегает под форму.

Как скачать картинку, если ссылка на нее без окончания?
https://jabber.ru/user/captcha/den/lPJ0DxCUOugPS8SJv406 загружаю в stream а куда выгружать?

Появление лишних отступов в мобильной версии
Привет, всем! Помогите, пожалуйста, мучаюсь уже не первый день, уже как только не искала в гугле, но все никак не могу найти ответа,...

1
0 / 0 / 0
Регистрация: 24.01.2019
Сообщений: 30
05.04.2019, 13:00  [ТС]
Продолжение темы.Вот как выходит у меня ===>
Миниатюры
Как разместить картинку и два <span> слева от нее без лишних отступов  
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.04.2019, 13:00
Помогаю со студенческими работами здесь

Как разместить два слова на одной строке, чтобы одно выравнивалось по левому краю, а второе по правому? Без CSS
Как разместить два слова на одной строке, чтобы одно выравнивалось по левому краю, а второе по правому? Без CSS

Нужен скрипт для удаления лишних span 'ов в innerHTML
Есть джава который выполняет перевод с английского и наоборот. На выходе посредством innerHTML в диве с id=&quot;dest&quot; получаем ряд...

Как вставить для перелистывания годов картинку-стрелку в span в js
Здравствуйте! Есть календарик. Под стили нужно сделать стрелку для перелистывания годов, в данный момент стрелка отображается кодом, но это...

Написать два кода с использованием рекурсии и без неё
Написать два кода с использованием рекурсии и без неё: Вычислить значение суммы(значение n вводится с клавиатуры): ...

Как убрать картинку слева в проводнике?
Как убрать картинку слева в проводнике? P.S. Эта картинка не из темы, она была изначально при установке windows


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru