Как установить пробел между блокам контента и футером?

@Vors · Регистрация: 03.06.2014

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

код примера

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>ПОТОК</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
Наш  поток
<div class="header block">.header</div>
<div class="column1 block">.column1</div>
<div class="column2 block">.column2</div>
<div class="column3 block">.column3</div>
<div class="header block">.footer</div>
</div>
<div class="container">
Что сторим
<img srs="https://htmlacademy.ru/assets/course15/final-flow-1.png ">
</div>
</body>
</head>

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
15:00 13.11.2015
body{
font-family: ="PT-saes", sans-serif;
background:black;
color:white;
}
 
.container{
width:300px;
margin:10px auto;
}
 
.block{
padding: 10px;
margin-bottom:10px;
border: 2px dashed #ccc;
color:#fff;
background:red;
}
 
.column1{
float:left;
width:65px;
min-height:50px;
margin-right:9px;
}
 
 .column2{
float:left;
width:80px;
min-height:50px;
}
 
.column3{
float:right;
width:65px;
min-height:50px;
}
 
.footer{
clear:both;
}

чтобы была сетка как на скрине

@Vors · 13.11.2015, 15:02 **[ТС]**

а то у меня "слипание" как видно прооисходит

@the_false · 13.11.2015, 15:05

Насколько я поняла, то обернуть collumn'ы в общий div и ему поставить, к примеру,

CSS
1
margin-bottom: 10px

Из того, что есть - всем collumn'ам так же, margin-bottom, но это не есть хорошо.

@ns16 · 13.11.2015, 16:30

Как было сказано выше, оберните столбцы в общий div, например, с классом content, но ставить margin-bottom не нужно - он уже стоит. Вместо этого задайте новому классу overflow: hidden. Это должно помочь.

HTML5
1
2
3
4
5
6
7
<div class="header block">.header</div>
<div class="content">
    <div class="column1 block">.column1</div>
    <div class="column2 block">.column2</div>
    <div class="column3 block">.column3</div>
</div>
<div class="header block">.footer</div>

CSS
1
2
3
.content {
    overflow: hidden;
}

@Fedor92 · 13.11.2015, 16:37

Vors, два пальца об асфальт...

Задайте нижнему блоку с классом "header block" в котором надпись .footer свойство: clear:both...

@Vors · 14.11.2015, 11:30 **[ТС]**

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

Vors, два пальца об асфальт... Задайте нижнему блоку с классом "header block" в котором надпись .footer свойство: clear:both...

задано - смотрите css до конца
40
41
42
строчки кода
однако не работает

Добавлено через 4 минуты
Fedor92,
а вот тут в условиях "среды" https://htmlacademy.ru/courses/65/run/7
при всем при этои работает

@Fedor92 · 14.11.2015, 11:46

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

однако не работает

У вас немного неверно выполнена разметка поэтому и не работает... Верхнему блоку Вами присвоены классы "header block" и нижние точно такие же, а должны быть "footer block" и тогда Ваши правила будут работать... К этому коду примените Ваши стили и сравните свою разметку с моей(как должно быть):

HTML5
1
2
3
4
5
6
7
<div class="header block">.header</div>
<div class="content">
    <div class="column1 block">.column1</div>
    <div class="column2 block">.column2</div>
    <div class="column3 block">.column3</div>
</div>
<div class="footer block">.footer</div>

@Vors · 14.11.2015, 12:27 **[ТС]**

Fedor92,
спасибо вам
я б сам наверное так и не заметил
да все дело в разметке
именно что! footer block внизу а у меня было
два хеадера вверху и внизу

даже допкласс content вводить не пришлось
и так произошло "отделение подвала"

@Vors · 14.11.2015, 12:29 **[ТС]**

вот

@smile7k · 14.11.2015, 13:14

Мой вариант, хоть уже и поздно:

HTML5
1
2
3
4
5
6
7
8
9
10
<body> 
<div class="container"> Наш *поток 
<div class="header block">.header</div> 
<div class="column1 block">.column1</div>
 <div class="column2 block">.column2</div>
 <div class="column3 block">.column3</div> 
<div style="clear:both;"></div>
<div class="footer"><div class="in-footer">.footer</div></div>
 </div>
 <div class="container"> Что сторим <img srs="https://htmlacademy.ru/assets/course15/final-flow-1.png "> </div>

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
.container {
margin: 12px auto;
width:300px;:
}
.block{
padding: 10px;
margin-bottom:10px;
border: 2px dashed #ccc;
color:#fff;
background:red;
}
 
.column1{
float:left;
width:65px;
min-height:50px;
margin-right:9px;
}
 
.column2{
float:left;
width:80px;
min-height:50px;
}
 
.column3{
float:right;
width:65px;
min-height:50px;
}
 
.footer{
width: 300px;
background: red;
border: 2px dashed #ccc;
color: #fff;
}
.in-footer{
padding: 10px;
}

@Fedor92 · 14.11.2015, 13:21

Не по теме:

smile7k, почему же поздно? В css много свойств, которые без clear:both позволяют выполнить поставленную задачу... Просто именно эта задача была конкретно по свойству clear, а так для развития темы Ваш вариант пригодится... :)

@Vors · 18.11.2015, 15:25 **[ТС]**

Fedor92,
почему не отображается пунктирная рамка вокруг текста
если в коде dotted есть?

@Fedor92 · 18.11.2015, 16:41

Vors, перед названием селектора элемента точка не ставится!

CSS
1
2
3
4
p{
background:#ff8040;
border: 2px dotted #fff;
}

@Vors · 19.11.2015, 13:36 **[ТС]**

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

перед названием селектора элемента точка не ставится!

понял

ФЕДОР вы лучший!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

Как установить пробел между блокам контента и футером?

Решение

Решение

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	13.11.2015, 15:02 [ТС]
	а то у меня "слипание" как видно прооисходит Миниатюры 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	13.11.2015, 16:37
	Vors, два пальца об асфальт... Задайте нижнему блоку с классом "header block" в котором надпись .footer свойство: clear:both... 0

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	14.11.2015, 12:27 [ТС]
	Fedor92, спасибо вам я б сам наверное так и не заметил да все дело в разметке именно что! footer block внизу а у меня было два хеадера вверху и внизу даже допкласс content вводить не пришлось и так произошло "отделение подвала" 0

@Fedor92
	14.11.2015, 13:21
	Не по теме: smile7k, почему же поздно? В css много свойств, которые без clear:both позволяют выполнить поставленную задачу... Просто именно эта задача была конкретно по свойству clear, а так для развития темы Ваш вариант пригодится... :) 0