Резиновая вёрстка

@lillamymla · Регистрация: 07.12.2012

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

Здравствуйте!
Необходимо создать резиновый макет одностраничного сайта, представленный на картинке.
Как я понимаю, структура div'ов должна выглядеть следующим образом:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="b"> 
        <div class="b-1"> 
            <img src="">
        </div>
    
        <div class="b-2">
            <h2>Текст</h2>
            <p>Текст</p>
        </div>
        
        <div class="b-3">
            <p><button>Кнопка</button></p>
        </div>
</div>

Интересует, каким образом, собственно, средствами CSS сделать так, чтобы все эти блоки располагались, как на картинке, по центру, и масштабировались в зависимости от разрешения экрана.
Читала, что для резиновой вёрстки необходимо задавать width/height в процентных соотношениях, но как-то не получилось адекватно воспринять полученную информацию и, соответственно, реализовать.

@Farrewa · 04.10.2015, 15:40

Если я делал бы, то я делал так:
HTML

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="b"> 
            <div class="b-1"> 
                <img src="http://images5.alphacoders.com/397/thumb-350-397776.jpg">
            </div>
            <div class="bb"> 
                <div class="b-2">
                    <h2>Текст</h2>
                    <p>Текст</p>
                </div>
                
                <div class="b-3">
                    <p><button>Кнопка</button></p>
                </div>
            </div>
        </div>

CSS

CSS
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
html, body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
    overflow: hidden;
}
 
p, span, text, button, img, h2{
    margin: 0px;
    padding: 0px;
}
 
.b{
    width: 80%;
    height: 80%;
    background: #f90;
    position: relative;
    margin: 5% 10%;
    overflow: hidden;
}
 
.b-1{
    width: 40%;
    height: 70%;
    background: #f00;
    position: relative;
    margin: 7% 5%;
    overflow: hidden;
    float: left;
}
 
.b-1 img{
    width: 100%;
    height: 100%;
}
 
.bb{
    width: 40%;
    height: 70%;
    background: #0f0;
    position: relative;
    margin: 7% 5%;
    overflow: hidden;
    float: left
}
 
.b-2{
    width: 100%;
    height: 70%;
    background: #f00;
    position: relative;
    margin: 0px;
    overflow: hidden;
    float: left;
}
 
.b-3{
    width: 100%;
    height: 28%;
    background: #f00;
    position: relative;
    margin-top: 2%;
    overflow: hidden;
    float: left;
}

Добавлено через 1 минуту
Я оставил блоки подсвеченными разными цветами ( background ) для наглядности. Не знаю правильно ли, но я сделал бы так.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль 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 полиномов. . .