@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
  • Вопрос задан
  • 106 просмотров
Решения вопроса 2
@ber_enot
С 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
botbot.ru
div выравнивается по центру, например с помощью:
margin: 0 auto;
Ответ написан
@faradeifrontend
Сделал просто через
#container .right {
float:right
}

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

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

Войти через TM ID
Похожие вопросы