Задать вопрос
@d3_dx
html

Как расположить картинку с div'ом в одну строку?

<body>
	<div id="container">
		<img src="http://images.vfl.ru/ii/1546588973/d8b4ebb2/24814164.jpg" alt="">
		<div class="right">dawdwa</div>
	</div>
</body>

body {
	background: #e5e9ff;
}

#container {
	width: 687px;
	height: 394px;
	background: #f4f5fa;
}

#container img {
	width: 369px;
	height: 394px;
}

#container .right {
	background: #777;
	width: 318px;
	height: 394px;
	display: inline-block;
}


display: inline-block
не работает почему-то

5c2f156419ed7712272796.png
  • Вопрос задан
  • 1928 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
@ber_enot
Веб-разработчик, Vue.js / Node.js
С inline-block между элементами ставится "пробел", поэтому в вашем случае div просто не влезает в ширину контейнера.

Поставьте контейнеру font-size: 0, а в дочерних элементах верните размер шрифта на место, и все будет ок.

UPD:
Кроме того, нужно добавить вот это:
#container img {
    vertical-align: top;
 }


Вот полный код CSS (html из вопроса):
body {
      background: #e5e9ff;
    }
    
    #container {
      width: 687px;
      height: 394px;
      background: #f4f5fa;
      font-size: 0;
    }
    
    #container img {
      width: 369px;
      height: 394px;
      vertical-align: top;
    }
    
    #container .right {
      background: #777;
      width: 318px;
      height: 394px;
      display: inline-block;
      font-size: 14px;
    }
Ответ написан
1 комментарий
1 комментарий
LenovoId
@LenovoId
svg, css,js
родителю написать : display:flex; align-items:center;
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
gobananas
@gobananas
finishhim.ru
div выравнивается по центру, например с помощью:
margin: 0 auto;
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Придумать альтернативный логотип к уже существующему
23 дек. 2024, в 07:27
1000 руб./за проект
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Ещё заказы