Задать вопрос
Bozon23
@Bozon23
html

Как задать ширину контейнеров относительно ширины экрана в процентах?

Добрый день!

Прошу помочь с написанием html и css для двух блоков, которые занимают 68% и 32% ширины экрана.

61e925c79a5ad793781368.jpeg
  • Вопрос задан
  • 1133 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 1
@MrColdCoffee
web
html
<div class="wrapper">

  <div class="left-block">
    1
  </div>
  
  <div class="right-block">
    2
  </div>

</div>

css
*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:0;
	padding:0;	
}
.wrapper{
  display: table;
  width: 100%;
  min-height:100vh;
  height:100%;
}
.left-block,.right-block{
  display: inline-block;
  min-height:100%;  
}
.left-block{width: 68%;background:green;}
.right-block{width: 32%;background:red;}
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
Shull
@Shull
хочу быть хорошим IT-шником
Если вы напишите для блока width:62%;, то он займёт 62%.
Однако, это 62% относительно его родителя. Посмотрите, насколько широк его родитель.
Например, у нас есть код:
<body><div></div></body>
Если наш body занимает в ширину весь экран, то div будет занимать 62% ширины экрана.
А вот если body занимает 50%экрана, то div будет занимать 31% ширины экрана.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Верстка одностраничника
25 нояб. 2024, в 12:07
12000 руб./за проект
Разработка лэндинга-визитки для юридической компании
25 нояб. 2024, в 11:40
10000 руб./за проект
Сделать интеграцию amoCRM + Яндекс.Метрика по API
25 нояб. 2024, в 11:09
4000 руб./за проект
Ещё заказы