Дивы наезжают друг на друга - HTML, CSS

@Шалун · Регистрация: 27.02.2017

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

Суть такая, блок <div class="linia"> наезжает на блок <div class="oho">.. .Не знаю как исправить.. .abolute убирать нельзя (т.к. там информация в 3 колонках) и высота колонок везде разная. Нужно, чтобы блок <div class="linia"> всегда имел отступ сверху (50px) от блока <div class="oho">(при том что на разных страницах высота контента везде другая) (код даю без отступов сверху(снизу) между блоками)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <div class="oho">
<div class="c1">
TEXT.. .
</div>
 
 <div class="c2">
TEXT.. .
</div>
 
 <div class="c3">
TEXT.. .
</div>
 </div>
 
<div class="linia"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.oho {
position: relative;
}
 
.oho div{
position: absolute;
}
 
 
.c1 { width: 100px;}
.c2 { left: 220px; width: 100px; top: 30px; }
.c3 { right: 0; width: 100px; }
 
.linia {
    margin: 0px 30px 0px 30px;
    border: none; 
    background-color: black; 
    height: 4px;
    width: 300px;
}

@AlexZaw · 21.11.2017, 23:26

По сути если <div class="linia"></div> задать верхний маржин в 50 пикселей то и получится нужный отступ.

Но так как все дети <div class="oho"> имеют абсолютное позиционирование, то сам этот блок имеет нулевую высоту. Нужно либо наполнить его каким то дополнительным контентом что бы он превышал размер вложенных дивов, либо отказываться от абсолюта. Это наверняка можно сделать просто вы не знаете как. Покажите или объясните получше что должно получится в итоге, все решаемо.

@Шалун · 21.11.2017, 23:28 **[ТС]**

AlexZaw, благодарю за ответ!

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью 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 полиномов. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	21.11.2017, 23:26
	По сути если `<div class="linia"></div>` задать верхний маржин в 50 пикселей то и получится нужный отступ. Но так как все дети `<div class="oho">` имеют абсолютное позиционирование, то сам этот блок имеет нулевую высоту. Нужно либо наполнить его каким то дополнительным контентом что бы он превышал размер вложенных дивов, либо отказываться от абсолюта. Это наверняка можно сделать просто вы не знаете как. Покажите или объясните получше что должно получится в итоге, все решаемо. 1

@Шалун -4 / 1 / 2 Регистрация: 27.02.2017 Сообщений: 205
	21.11.2017, 23:28 [ТС]
	AlexZaw, благодарю за ответ! 0