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

Не получается расположить 3 блока div по порядку?

Требуется расположить 3 блока по порядку с размерами- 2 крайних по 20%, а средний 60%. По факту крайний правый блок съезжает немного вниз, а у среднего отсутствует рамка.
5a397937d0abc858230060.png
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css"  rel="stylesheet" type="text/css" >

<meta charset="utf-8"
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" >
<title>Использование элемента LINK</title>
</head>
 <body>
 <div id="main">
 <div id="uk">А это 1 блок с белым Фоном</div>
 <div id="content" >А это второй блок с белым Фоном </div>
 <div id="ru">А это 3 блок с белым Фоном </div>
</div>
   </body>

</html>


#main{
 width:100%;}  
#uk{				width:20%;
				height:50%;
				border:1px solid black;
				float:left;}  

#content{				width:60%;
				height:100%;
				border:1px solid black;
				float:none;}

#ru{				width:20%;
				height:50%;
				border:1px solid black;
				float:right;}
  • Вопрос задан
  • 164 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
@S1mF 
#main {
    display: flex
}

#uk {
    flex: 2;
}

#content {
    flex: 6;
}

#ru {
    flex: 2;
}
Ответ написан
Комментировать
Комментировать
@Wass1 Автор вопроса
С делал как было предложено, но рамка по центру не появилась, крайние блоки увеличились в размерах.
5a39803bd26b1582948209.png
#main{
	display: flex;
    width:100%;}
  
#uk{    flex: 2;
		width:10%;
		height:50%;
		border:1px solid black;
		float:left;}  

#content{   flex: 6;
            width:60%;
			height:100%;
			border:1px solid black;
			float:none;}

#ru{    flex: 2;
		width:10%;
		height:50%;
		border:1px solid black;
		float:right;}


Спасибо всем за советы. То что планировалось сделать получилось следующим образом
#main{border:1px solid black;
    width:100%;		}
  #uk{border:1px solid black;
    width:17.3%;
	float:left;
	height:500px;
	padding:3px;}
  #content{border:1px solid black;
    background-color:#b3e3e6;
    width:62.9%;
	position:absolute; 
	left:18.4%;
	padding:2px;	}
  #ru{border:1px solid black;
    width:17.3%;
	float:right;
	height:500px;
	padding:3px;}

Не знаю насколько правильно, но в Internet Explorer, Firefox, Edge открывается как задумано.
5a3a5f9cdda6e817033197.png
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
groog
@groog
Я только учусь 
div{
  box-sizing:border-box; /* вот это добавить */
}

#main{
 width:100%;
 } 
 
#uk{		
        width:20%;
        height:50%;
        border:1px solid black;
        float:left;
}  

#content{
  	width:60%;
        height:100%;
        border:1px solid black;
        float:left; /* вот это исправить */
}

#ru{		
        width:20%;
        height:50%;
        border:1px solid black;
        float:right;
}


И уберите свойства height. Они не работают в данном контексте.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Web-программист (Bitrix) / PHP, CSS, JS (Fullstack)
VIARDA
от 60 000 до 150 000 ₽
Frontend-разработчик (React)
ДАЛЕЕ
от 140 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка продажного сайта на тильде + дизайнер-маркетолог
08 июл. 2024, в 01:07
50000 руб./за проект
Придумать сценарий рекламного ролика для роутера
07 июл. 2024, в 22:10
10000 руб./за проект
Придумать и снять небольшой рекламный ролик про роутер
07 июл. 2024, в 22:01
30000 руб./за проект
Ещё заказы