Задать вопрос

Горизонтальное расположение двух блоков?

Нужно разместить в одной строке (линии) два блока неизвестной ширины так как в примере, но так, чтобы нижняя граница (border-bottom) правого элемента не находилась под левым блоком, но в то же время граница должна доходить до конца строки
<html>
	<head>
		<style>
			.container {
				position:relative;
				width: 100%;
				margin: 0 auto;
			}
			.block1 {
				float:left;
				margin-right: 10px;
			}
			.block2 {
				border-bottom:2px solid red;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="block1">Левый блок</div>
			<div class="block2">Правый блок</div>
		</div>
	</body>
</html>


нужно чтобы было как на картинке внизу
3f6ed769dd2485e3e8fd3b0f0bca57ab.jpg
  • Вопрос задан
  • 182 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 1
Можно сделать с помощью flexbox: codepen.io/ierhyna/pen/ZQxvKv
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
KarleKremen
@KarleKremen
Игнорирую Bootstrap
@DanSorokin
Full-stack developer at onvoya.com
Задайте просто второму блоку margin-left и все.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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