Задать вопрос
@Haraconer
css

Как сделать, чтобы в css блоки были на одном уровне(линии)?

Заранее извините за тупость, я из деревни.
С помощью css надо расположить три блока в ряд. Центральный должен занимать 70%, два крайних по 15%.
Вот html код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Главная страница</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
 
<body>
 
<div id="center">центр</div>
<div id="left">лево</div>
<div id="right">право</div>


</body>
</html>


Вот код css:
#center{
background: orange;
width: 70%;
margin: 0 auto;
}


#left{
background: black;
width: 15%;
height: 100%;
float: left;
}

#right{
background: black;
width: 15%;
float: right;
}


Но почему-то центральный блок расположен выше, чем два крайних:
727ef0ace7814ef6a0f881f6f8d2e999.png
Когда увеличиваю длину блоков до 100%, то соответственно появляется полоса прокрутки:
d4d72b110ebc4902a23b2479fa26943d.png
Как это исправить?
  • Вопрос задан
  • 15663 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
@DenJel
О господи люди до сих пор верстают float'ами. Я думал динозавры уже вымерли. Держи правильный вариант...
.wrapper {
  display: flex;
}

.center, .right, .left {
   height: 100%;
}

.center{
    background: orange;
    width: 70%;
 }
 
 .left, .right{
    background: black;
    width: 15%;
 }


<div class="wrapper">
  <div class="left">лево</div>
  <div class="center">центр</div>
  <div class="right">право</div>
</div>


Пример
Ответ написан
Комментировать
Комментировать
zorro76
@zorro76
Вот так к примеру: jsfiddle

#center{
background: orange;
width: 70%;
display: inline-block;
}


#left{
background: black;
width: 15%;
display: inline-block;
float: left;
}

#right{
background: black;
width: 15%;
display: inline-block;
float: right;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
PerfectoWeb
@PerfectoWeb
Создание сайтов любой сложности
Вам так нужно?
1310d34c3bc74e0292bd143044d527e9.png
Если да, то как вариант:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Главная страница</title>
<style>
	#center{
		background: orange;
		width: 70%;
		height: 100%;
		float: left;
	}
	#left{
		background: black;
		width: 15%;
		height: 100%;
		float: left;
	}
	
	#right{
		background: black;
		width: 15%;
		height: 100%;
		float: left;
	}
</style>
</head>
 
<body>
 
	<div id="left">лево</div>
	<div id="center">центр</div>
	<div id="right">право</div>

</body>
</html>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция бс24 с сайтом на битрикс
02 мая 2024, в 03:39
7000 руб./за проект
HTML+Javascript траблшутинг
02 мая 2024, в 03:17
2000 руб./в час
Нужна презентация и опросник на новую фичу для ресторанов
02 мая 2024, в 01:05
8000 руб./за проект
Ещё заказы