@d3_dx

Как расположить картинку с 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
  • Вопрос задан
  • 188 просмотров
Решения вопроса 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;
    }
Ответ написан
LenovoId
@LenovoId
what the fuck ?
родителю написать : display:flex; align-items:center;
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
gobananas
@gobananas
finishhim.ru
div выравнивается по центру, например с помощью:
margin: 0 auto;
Ответ написан
@faradeifrontend
Использую пробелы для отступов ;)
Сделал просто через
#container .right {
float:right
}

По ответу Артем Артем так и не полулилось мб не так понял.
С flexom сразу получилось.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
Девять линий Ульяновск
от 45 000 до 80 000 руб.
Krome Photos Челябинск
от 80 000 руб.
25 июн. 2019, в 00:24
15000 руб./за проект
24 июн. 2019, в 23:27
8000 руб./за проект