Три блока, центральный fixed

@Seth777 · Регистрация: 19.03.2018

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

Всем привет, подскажите как сделать шапку тремя дивами в одну строку, чтобы средний был фиксированного размера(200px), остальные резиновые в пределах общей ширины родителя (980px) - максимум 390px, а если меньше, то уменьшались бы пропорционально?
Выглядит примерно так:

@golosalex · 26.03.2018, 03:50

попробуйте использовать функцию Calc() в css коде.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="primer.css">
</head>
<body>
    <div class="hedder">
        <div class="class1">1</div>
        <div class="class2">2</div>
        <div class="class3">3</div>
    </div>
</body>
</html>

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
/* сброс стилей браузера */
* {
box-sizing: border-box;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.2;
}
ol { 
    padding-left: 1.4em;
    list-style: decimal;
}
ul {
    padding-left: 1.4em;
    list-style: square;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*стили для решения*/
.hedder{
    max-width: 980px;
    height: 500px;
    margin: 0 auto;
}
.class1{
    float: left;
    width: calc((100% - 200px) / 2);
    background: #DD2184FF;
    height: 500px;
}
.class2{float: left;
    width: calc(200px);
    background: #4255BCFF;
    height: 500px;
}.class3{
    float: left;
    width: calc((100% - 200px) / 2);
    background: #39C55DFF;
    height: 500px;
}

важное замечание: в функции calc() необходимо ставить пробелы между операторами, а то не будет работать.

@AlexZaw · 26.03.2018, 09:08

Если уж calc использовать то можно и на флексах сделать:

HTML5
1
2
3
4
5
<div class="wrap">
  <div class="cl1"></div>
  <div class="cl2"></div>
  <div class="cl3"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrap{
  max-width: 980px;
  border: 1px solid #000;
  height: 200px;
  display: flex;
  margin: 0 auto;
}
.cl2{
  flex-basis: 200px;
  background: #f00;
}
.cl1,.cl3{
  flex-grow: 1;
  background: #0f0;
}

@Seth777 · 26.03.2018, 12:56 **[ТС]**

golosalex все получилось, но не пойму как выравнивать текст в крайних блоках,

CSS
1
2
vertical-align: bottom;
margin-bottom: 20px;

не работает

AlexZaw, в предложенном варианте средний блок почему то не по центру

@AlexZaw · 26.03.2018, 13:32

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

в предложенном варианте средний блок почему то не по центру

Добавьте:

CSS
1
2
3
4
5
6
.cl2{
  flex-shrink: 0;
}
.cl1,.cl3{
  width: 100%;
}

@Seth777 · 26.03.2018, 13:52 **[ТС]**

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrapimg{
  max-width: 980px;
  height: 200px;
  display: flex;
  margin: 0 auto;
}
.cl2{
  flex-basis: 200px;
  flex-shrink: 0;
}
.cl1,.cl3{
  flex-grow: 1;
  width: 100%;
}

(чуть изменил класс, чтобы не пересекалось)
Теперь все в столбик с выравниванием по левому краю, третий блок на ширину экрана - вот так

@golosalex · 26.03.2018, 14:58

Текст обычно ровняют стилем text-align это по горизонтали.
По вертикали равнять стилем margin-bottom: 20px; или (padding) можно только блочные элементы, а текст это строчный элемент, чтобы сделать его блочным надо применить стиль display: block; для текста внутри

Приведу небольшую цитату из книги Девид Макфарланд - Новая большая книга CSS(Бестселлеры O'Reilly) - 2016, надеюсь тут никто не будет против?

Хотя браузеры и обрабатывают любой тег веб-страницы подобно блочному элементу,
на самом деле они не все одинаковы. В CSS существует два различных типа элемен-
тов: блочные и строчные.
В блочных элементах создается разрыв строки перед элементом и после него.
Например, абзац p создает блок, отделенный от элементов, расположенных выше
и ниже его. Другими примерами являются заголовки, контейнеры div, таблицы,
списки и элементы списков.
Строчные элементы не создают разрывов строк ни до, ни после себя. Они ото-
бражаются на одной строке с содержимым рядом стоящих элементов. Элемент
strong — строчный. Слово, отформатированное с его помощью, будет расположено
на одной строке с текстом, заключенным в другие строчные элементы, например
em. Было бы очень странно, если бы отдельное слово в середине абзаца, выделенное
strong, вдруг появилось на отдельной строке. Другими примерами строчных эле-
ментов являются img — для добавления изображений, a — для создания ссылок,
различные элементы для разметки форм и т. д.
В большинстве случаев каскадные таблицы стилей

Книга имеется в рекомендованных к прочтению и она стоит того. Правда, я не совсем уверен что именно с этой проблемой вы столкнулись.

@Seth777 · 26.03.2018, 15:13 **[ТС]**

Уже и в тексте добавил display: block; и в классе - не перемещается вниз

@golosalex · 26.03.2018, 15:33

тут нужно посмотреть на код, трудно сказать что не так.

@Seth777 · 26.03.2018, 15:48 **[ТС]**

я же выше дал ссылку там сейчас Ваш вариант

@golosalex · 26.03.2018, 18:51

никак не могу найти, где у вас лежат нужные CSS стили... и кстати у вас верстка сыпится чутка, при уменьшении окна браузера.

Добавлено через 32 минуты

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="primer.css">
</head>
<body>
    <div class="hedder">
        <div class="class1"><span class="center">123456</span></div>
        <div class="class2">2</div>
        <div class="class3">3</div>
    </div>
</body>
</html>

и стили

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
/* сброс стилей браузера */
* {
box-sizing: border-box;
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.2;
}
ol { 
    padding-left: 1.4em;
    list-style: decimal;
}
ul {
    padding-left: 1.4em;
    list-style: square;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*стили для решения*/
.hedder{
    max-width: 980px;
    height: 500px;
    margin: 0 auto;
}
.class1{
    float: left;
    width: calc((100% - 200px) / 2);
    background: #DD2184FF;
    height: 500px;
}
.class2{
    float: left;
    width: calc(200px);
    background: #4255BCFF;
    height: 500px;
}.class3{
    float: left;
    width: calc((100% - 200px) / 2);
    background: #39C55DFF;
    height: 500px;
}
.center{
    display: block;
    padding-top: 40px;
    padding-left: 50px;
}

у меня отступы работают.

@Seth777 · 26.03.2018, 23:11 **[ТС]**

Паддинги работают, но

CSS
1
vertical-align: bottom; margin-bottom: 20px;

почему-то нет

@golosalex · 27.03.2018, 00:33

может будет проще понять, если нарисуете border границу у элемента, которому пытаетесь задать свойство margin. именно граница и разделяет маржин и паддинг, возможно маржин уже задано каким-то стилем с высокой специфичностью, а здесь вы пытаетесь его переопределить.

@Seth777 · 27.03.2018, 21:53 **[ТС]**

я выше дал ссылку на чистый файл с Вашим стилем и кодом, но и там не работает смещение блока текста в нижнюю часть дива

@AlexZaw · 27.03.2018, 22:11

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="hedder">
        <div class="class1">
    <div class="my" style="
    display: inline-block;
    height:  100%;
    vertical-align:  bottom;
"></div>
    <span class="center">123456</span></div>
        <div class="class2">2</div>
        <div class="class3">3</div>
    </div>

Либо вместо дива с классом my сделайте псевдоэлемент с теми же стилями. и уберите у спана display:block

@Seth777 · 27.03.2018, 23:08 **[ТС]**

может я что-то не так делаю, но:
https://www.cyberforum.ru/atta... 1522181177

@AlexZaw · 27.03.2018, 23:20

Скорее всего у спана забыли display:block убрать, либо для элемента с 100% высотой указать display:inline-block;

@golosalex · 28.03.2018, 01:31

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="primer.css">
</head>
<body>
<div class="hedder">
        <div class="class1">
    <!-- <div class="my"></div> -->
    <span class="center">123456</span></div>
        <div class="class2">2</div>
        <div class="class3">3</div>
    </div>
</body>
</html>

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
.hedder {
    max-width: 980px;
    height: 200px;
    margin: 0 auto;
}
 
.class1 {
    float: left;
    width: calc((100% - 200px) / 2);
    background: #DD2184FF;
    vertical-align: bottom;
    margin-bottom: 20px;
    height: 200px;
}
 
.class2 {
    float: left;
    width: calc(200px);
    background: #4255BCFF;
    height: 200px;
}
 
.class3 {
    float: left;
    width: calc((100% - 200px) / 2);
    background: #39C55DFF;
    height: 200px;
}
 
.center {
    border: 5px solid #666;
    display:block;
    vertical-align: bottom;
    margin-top: 20px;
    text-align: center;
}
 
.my {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    margin-bottom: 20px;
}

не совсем понял что за странный блок с классом MY затесался к вам в код, я его удалил(оставил только в стилях). добавил рамку у текста с границей 5пикселей для наглядности. Margin делает отступ за пределами границы элемента вот у меня Margin-top работает(left right тоже), а margin-bottom и не должен работать так как вы могли ожидать, так как нижний отступ не означает, что элемент должен опуститься вниз и отстоять от нижней границы на указанное в Margin-bottom число. если вы хотите позиционировать тест внутри блока относительно низа, нужно применить относительное позиционирование, но лучше просто используйте отступы.

Добавлено через 18 минут
вот так можно относительно позиционировать одни элементы внутри других. надо задать стиль position: relative; для элемента родителя, если не указывать смещения, то блок никуда не уедит.
а у элемента дочернего надо задать position: absolute; с нужным вам позиционированием: top left bottom right думаю если я вас правильно понял вы это пытаетесь сделать. вот код:

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
.hedder {
    max-width: 980px;
    height: 200px;
    margin: 0 auto;
}
 
.class1 {
    position: relative;
    float: left;
    width: calc((100% - 200px) / 2);
    background: #DD2184FF;
    vertical-align: bottom;
    margin-bottom: 20px;
    height: 200px;
}
 
.class2 {
    float: left;
    width: calc(200px);
    background: #4255BCFF;
    height: 200px;
}
 
.class3 {
    position: relative;
    float: left;
    width: calc((100% - 200px) / 2);
    background: #39C55DFF;
    height: 200px;
}
 
.center {
    position: absolute;
    bottom: 20px;
    border: 5px solid #666;
    display:block;
    margin-bottom: 20px;
    margin-left: 20px;
    text-align: center;
 }
 
.my {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    margin-bottom: 20px;
}

@Seth777 · 28.03.2018, 12:09 **[ТС]**

теперь то, что надо! Спасибо, можно тему закрыть

Новые блоги и статьи Все статьи Все блоги /
Установка 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 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@Seth777 0 / 0 / 0 Регистрация: 19.03.2018 Сообщений: 12

	Три блока, центральный fixed 26.03.2018, 01:01. Показов 1809. Ответов 18 Метки нет (Все метки) Всем привет, подскажите как сделать шапку тремя дивами в одну строку, чтобы средний был фиксированного размера(200px), остальные резиновые в пределах общей ширины родителя (980px) - максимум 390px, а если меньше, то уменьшались бы пропорционально? Выглядит примерно так: Миниатюры 0

@Seth777 0 / 0 / 0 Регистрация: 19.03.2018 Сообщений: 12
	26.03.2018, 15:13 [ТС]
	Уже и в тексте добавил `display: block;` и в классе - не перемещается вниз 0

@golosalex 151 / 135 / 29 Регистрация: 02.07.2013 Сообщений: 967
	26.03.2018, 15:33
	тут нужно посмотреть на код, трудно сказать что не так. 1

@Seth777 0 / 0 / 0 Регистрация: 19.03.2018 Сообщений: 12
	26.03.2018, 15:48 [ТС]
	я же выше дал ссылку там сейчас Ваш вариант 0

@golosalex 151 / 135 / 29 Регистрация: 02.07.2013 Сообщений: 967
	27.03.2018, 00:33
	может будет проще понять, если нарисуете border границу у элемента, которому пытаетесь задать свойство margin. именно граница и разделяет маржин и паддинг, возможно маржин уже задано каким-то стилем с высокой специфичностью, а здесь вы пытаетесь его переопределить. 1

@Seth777 0 / 0 / 0 Регистрация: 19.03.2018 Сообщений: 12
	27.03.2018, 21:53 [ТС]
	я выше дал ссылку на чистый файл с Вашим стилем и кодом, но и там не работает смещение блока текста в нижнюю часть дива 0

@Seth777 0 / 0 / 0 Регистрация: 19.03.2018 Сообщений: 12
	27.03.2018, 23:08 [ТС]
	может я что-то не так делаю, но: https://www.cyberforum.ru/atta... 1522181177 Миниатюры 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	27.03.2018, 23:20
	Скорее всего у спана забыли `display:block` убрать, либо для элемента с 100% высотой указать `display:inline-block;` 1

@Seth777 0 / 0 / 0 Регистрация: 19.03.2018 Сообщений: 12
	28.03.2018, 12:09 [ТС]
	теперь то, что надо! Спасибо, можно тему закрыть 0

Три блока, центральный fixed

Решение