-86 / 7 / 0
Регистрация: 29.08.2014
Сообщений: 247
1

Схлопывание родительского div-а

16.07.2015, 08:56. Показов 3363. Ответов 12
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Разные способы перепробывал, но что-то не получается решить проблему схлопывания родительского div-а.
Родительскому div-у нельзя задавать height в моём случае.

Спасите-памагите дарагие друзья, не бросайте таварища в биде! И ваздасца вам от бога по самое нехочу

Вот такая фигня:

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
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<title></title>
    
<style>
.header {
  position: relative;
  background: red;
}
.name-and-slogan {
  width: 23%;
  float: left;
  position: absolute;
  bottom: 0;
  left: 0;
  background: green;
}
.menu {
  width: 70%;
  float: left;
  position: absolute;
  bottom: 0;
  left: 30%;
  background: yellow;
}
</style>
 
</head>
<body>
  
<div class="header">
 
<div class="name-and-slogan">text<br>text<br>text<br>text</div>
      
<div class="menu">text</div>
 
</div>
 
</body>
</html>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
16.07.2015, 08:56
Ответы с готовыми решениями:

Прикрепить вложенный div к верху, родительского элемента div
Здравствуйте! Делаю все так, как показано в видеоуроке......

Растянуть элемент Div на всю высоту родительского div
Как сделать что бы элемент Div растягивался на всю высоту следующего элемента? Я только...

Не отображается background родительского div
Два блока, в которые помещаются изображения, должны разделяться вертикальной полосой, цвет которой...

Выезжает div за пределы родительского
Выезжает див (см изображение) Если есть какие ещё какие предложения по улучшению рад буду получить...

12
-86 / 7 / 0
Регистрация: 29.08.2014
Сообщений: 247
16.07.2015, 11:14  [ТС] 2
Вот так нужно:
Миниатюры
Схлопывание родительского div-а  
0
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
16.07.2015, 11:40 3
Тыр-тыр, у Вас используется свойство float:left для дочерних блоков... Либо задавайте его и родительскому тоже - либо убирайте у дочерних и будет Вам счастье...
P.S. зачем пишите посты с ошибками(специально)? Грамотнее напишите быстрее помогут...
0
-86 / 7 / 0
Регистрация: 29.08.2014
Сообщений: 247
16.07.2015, 12:36  [ТС] 4
Да задавал родительскому float: left;, но нисколько не помогает.
И у дочерних убирал float: left; и тоже не помогает.
Вот я и озадачен.

С ошибками пишу для эпотажу и шутки юмора, чтобы повеселить или оскорбить интеллектуальные чувства верующих в Годзилу и его холопа - бога
0
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
16.07.2015, 12:50 5
Кликните здесь для просмотра всего текста
Тыр-тыр, ну вот вариант с float к примеру:
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></title>
    
<style>
.header {
  float:left;
  width:100%;
  background: red;
}
.name-and-slogan {
  float:left;
  width: 23%;
  background: green;
}
.menu {
  float:left;
  width: 77%;
  background: yellow;
  margin-top:54px
}
</style>
 
</head>
<body>
<div class="header">
    <div class="name-and-slogan">text<br>text<br>text<br>text</div>
    <div class="menu">text</div>
</div>
</body>
</html>
0
-86 / 7 / 0
Регистрация: 29.08.2014
Сообщений: 247
16.07.2015, 13:08  [ТС] 6
Эх. Ну не катит так абсолютно! Халтура в чистом виде.
Всё должно быть резиновым.
Это и дураку ясно, что можно задать размеры блоков или отступ сверху

Добавлено через 6 минут
В левом зелёном блоке измениться высота и тогда жёлтый блок съедет вверх.
0
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
16.07.2015, 13:29 7
Тыр-тыр, а что есть идеи?
0
-86 / 7 / 0
Регистрация: 29.08.2014
Сообщений: 247
16.07.2015, 13:42  [ТС] 8
Цитата Сообщение от Fedor92 Посмотреть сообщение
Тыр-тыр, а что есть идеи?
Если бы знал решение, то здесь не спрашивал и не тратил своё время.
0
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
16.07.2015, 13:43 9
Идеальный вариант сделать четыре дива(три .header, .name-and-slogan, .menu и обёртка)...
0
-86 / 7 / 0
Регистрация: 29.08.2014
Сообщений: 247
16.07.2015, 13:55  [ТС] 10
В данном случае header и есть обёртка.
Вот и не получается в этой обёртке прижать к низу 2 дива - название компании и меню.
По высоте левый блок (название компании) будет меняться.
0
Эксперт HTML/CSS
2964 / 2598 / 1068
Регистрация: 15.12.2012
Сообщений: 9,875
Записей в блоге: 11
16.07.2015, 14:16 11
Лучший ответ Сообщение было отмечено Тыр-тыр как решение

Решение

Ладно так уж и быть вот другая халтура...)))
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
html, body{width:100%; height:100%; margin:0}
.header{width:100%; position:absolute; height:auto; background:red}
.name-and-slogan{width:23%; height:inherit; float:left; position:relative; background:green}
.menu{left:23%; width:77%; bottom:0; position:absolute; background:yellow;}
</style>
<body>
<div class="header">
  <div class="name-and-slogan">text<br>text<br>text<br>text<br>text<br>text</div>
    <div class="menu">text</div>
</div>
</body>
</html>
1
-86 / 7 / 0
Регистрация: 29.08.2014
Сообщений: 247
16.07.2015, 14:32  [ТС] 12
Фёдор Иваныч, спасибо!
Вроде всё нормально.
Но как всё сложно с этими треклятыми дивами и позиционированием - будь они неладны! Вот был рай, когда всё верстали таблицами - я и сейчас это легко мог сделать таблицей, но так будет не по фен шую
0
Fedor92
16.07.2015, 15:09     Схлопывание родительского div-а
  #13

Не по теме:

Тыр-тыр, да были времена... Фреймы, таблицы... Ну да ладно - это всё лирика... Удачи в разработках...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
16.07.2015, 15:09

Float родительского div по содержимому
Доброго. Нужно растянуть родительский div по-вертикале, конструкция такая &lt;div class=&quot;main1&quot;&gt; ...

Вывести дочерний div за пределы родительского
пытаюсь отрицательным margin-left вывести дочерный див за пределы родительского, но он обрезается...

Дочерние <div> выходят за пределы родительского
Подскажите пожалуйста как решить проблему.При неоднократном обновлении окна браузера содержимое...

Прижать div к низу родительского блока
Есть такой html-код: &lt;div id=&quot;mainblock&quot;&gt; &lt;div class=&quot;innerblock&quot;&gt; &lt;div&gt;&lt;img...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru