Задать вопрос
@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
Как это исправить?
  • Вопрос задан
  • 16393 просмотра
Комментировать
Подписаться 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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Верстальщик HTML
MST
от 450 $
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Периодически возникает ошибка при включении сайта на open server
25 дек. 2024, в 02:45
1000 руб./за проект
Разработать нативное приложение под iOS
25 дек. 2024, в 00:52
150000 руб./за проект
Правки WP
24 дек. 2024, в 23:35
11000 руб./за проект
Ещё заказы