Блочная вёрстка по макету

@vbartalevich · Регистрация: 30.12.2015

Студворк — интернет-сервис помощи студентам

Какой код написать, если тут три дива?

HTML5
1
2
3
<div id="block1"></div>
<div id="block2"></div>
<div id="block3"></div>

CSS
1
2
3
4
5
6
7
8
9
10
#block1{
    width: 65%;
    height: 60vh;
    background-color: black;
}
#block2, #block3{
    width: 35%;
    height: 30vh;
    background-color: black;
}

если я делаю: display: block-inline, то у меня блоки полностью смещаются, а над этими блоками у меня навигационная панель

@mrtoxas · 20.10.2016, 09:09

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#block1,#block2,#block3{
  width:50%;
  border:1px solid black;
  box-sizing: border-box;
}
#block1{
  height:100px;
  float:left;
}
#block2{
  margin-left:50%;
  height:50px;
}
#block3{
  height:50px;
  margin-left:50%;
}

@Fedor92 · 20.10.2016, 12:34

vbartalevich, примерно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    html, body{
        width: 100%;
        height: 100%;
    }
     
     #block1, #block2, #block3{
        float:left;
        background: #b50100
     }
    #block1{
        width: 65%;
        height: 60vh;
        background: #b50100;
    }
    #block2, #block3{
        width: 35%;
        height: 30vh;
        outline:1px solid #fff
    }
  </style>
</head>
<body>
    <div id="block1"></div>
    <div id="block2"></div>
    <div id="block3"></div>
</body>
</html>

mrtoxas, margin-left:50% - мощный стиль...

@mrtoxas · 20.10.2016, 15:08

Сообщение от Fedor92

мощный стиль

Высчитывается из ширины родителя.

Результат

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

Блочная вёрстка по макету

Решение