Форум программистов «Весельчак У»
  *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

  • Рекомендуем проверить настройки временной зоны в вашем профиле (страница "Внешний вид форума", пункт "Часовой пояс:").
  • У нас больше нет рассылок. Если вам приходят письма от наших бывших рассылок mail.ru и subscribe.ru, то знайте, что это не мы рассылаем.
   Начало  
Наши сайты
     
  Галерея  
  Весельчак У  
  Наша Вики  
  Хранилище  
  Проекты  
     
Правила
     
  Правила форума Правила русского языка  
     
Помощь Поиск Календарь Почта Войти Регистрация  
Форум программистов «Весельчак У» > Направления программирования > Web > HTML/DHTML > Тема: почему высота элемента div зависит от float вложенных в него элементов (FF)
 
Страниц: [1]   Вниз
« предыдущая тема следующая тема »
  Печать  
Автор Тема: почему высота элемента div зависит от float вложенных в него элементов (FF)  (Прочитано 29673 раз)
0 Пользователей и 5 Гостей смотрят эту тему.
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть
« : 24-04-2009 09:18 » 
привет

html-ка:
Код:
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link rel="stylesheet" href="testDiv.css" type="text/css">
    </head>
    <body>
        <div class="main">
            <div class="content first"></div>
            <div class="content second"></div>
        </div>
    </body>
</html>

и testDiv.css:
Код:
.content {
    float: left;
}

.first {
    height: 94px;
}

.second {
    height: 45px;
}

при таком раскладе высота элемента div класса main получается 0.
если из класса content убрать float, высота div класса main - 139.
как оставить float и высота чтобы была правильная - 94px?
есть ут любители семантической верстки? подскажите  Скромно так...
Записан
Славная трава...
Chuda
Гость
« Ответ #1 : 24-04-2009 09:23 » 
float — это уже означает, что элемент вырван из потока и прибит к одному из краёв, а всё остальное его должно обтекать.
Так а всего остального, кроме обтекаемых элементов, просто нет, потому и высота нулевая.
.main { overflow: hidden; } сделай. Тогда div.main будет прятать то, что не вошло в заданные ему размеры. А поскольку размеры не заданы, то он будет подстраивать их сам так, чтобы всё своё содержимое отобразить.
Вот как-то так.
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #2 : 24-04-2009 09:38 » new
ну и что что у main высота 0?
Кому она мешает?
следующий тег делай
clear:both
Записан
Мы все учились понемногу... Чему-нибудь и как-нибудь.
Chuda
Гость
« Ответ #3 : 24-04-2009 09:39 » 
Sla, а зачем лишний тэг — это вопрос номер раз.
Что будет в IE, если справа или слева от тэга с clear:both должно располагаться ещё что-либо — это вопрос номер два.
Записан
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть
« Ответ #4 : 24-04-2009 09:42 » 
Шильгия, дай я тебя поцелую!!! спасибо огромное!  Улыбаюсь)
Записан
Славная трава...
Chuda
Гость
« Ответ #5 : 24-04-2009 09:49 » 
Цитата: Falsehood от 24-04-2009 09:42
Шильгия, дай я тебя поцелую!!! спасибо огромное!  Улыбаюсь)
Скромно так...
да а как же… я всегда рада помочь, если что Улыбаюсь
Записан
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #6 : 24-04-2009 09:56 » 
Все зависит от целей
Записан
Мы все учились понемногу... Чему-нибудь и как-нибудь.
Chuda
Гость
« Ответ #7 : 24-04-2009 10:12 » 
согласная я.
если например подвал на страничке, который согласно задумке дизайнера должен быть во всю ширину, то я обычно ему говорю clear:both даже если перед ним нет никаких float'ов.
В данном же случае не надо.
Записан
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть
« Ответ #8 : 24-04-2009 12:01 » 
на самом деле это временное решение:
ситуация такая, что нам прислали дизайн приложения, которое мы делаем. прислали в виде html-страничек и css-файлов. надо применить все это хозяйство к приложению.
в присланном html-е указанный пример работает без overflow: hidden; . совершенно непонятно, почему.
Записан
Славная трава...
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #9 : 24-04-2009 12:18 » 
Falsehood, значит ты нам не все показала
добавь бордеры
.main {
border: 1px red solid;
overflow: hidden;
}
.content {
    float: left;
}

.first {
    height: 94px;
   border:1px blue solid;
}
.second {
    height: 45px;
   border:1px green solid;
}
Записан
Мы все учились понемногу... Чему-нибудь и как-нибудь.
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть
« Ответ #10 : 24-04-2009 14:00 » 
Sla, в FireBug и без бордеров видно, что эти элементы в присланном примере рисуются правильно, а в моем - неправильно.
а все показывать - многа букф получится.

а вообще, ты был прав. в присланном css есть строчка
div:after, form:after, ul:after, ol:after, dl:after, dt:after, dd:after, h1:after, h2:after, h3:after, h4:after, p:after {
   content: '';
   display: block;
   clear: both;
}
которая в приложении по какой-то непонятной причине не отрабатывает Улыбаюсь
Записан
Славная трава...
Sla
Команда клуба

ua
Offline Offline
Пол: Мужской

WWW
« Ответ #11 : 24-04-2009 14:27 » 
круто Улыбаюсь
чтоб так издеваться над версткой
:after и :before действуют на content,
а все остальное - для класса

я лично так понимал, но век живи - век учись и читай больше матчасть
Цитата
So, for example, because the initial value of the 'display' property is 'inline', the quote in the previous example is inserted as an inline box (i.e., on the same line as the element's initial text content). The next example explicitly sets the 'display' property to 'block', so that the inserted text becomes a block:

body:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}
Записан
Мы все учились понемногу... Чему-нибудь и как-нибудь.
Chuda
Гость
« Ответ #12 : 04-05-2009 09:04 » 
Falsehood, а этот вариант разве работает в IE? По идее не должен.

Согласна со Славой, это издевательство.
Записан
Falsehood
Молодой специалист

ru
Offline Offline
Пол: Женский
не может быть
« Ответ #13 : 05-05-2009 13:23 » 
в IE не пробовала.

у меня не работало, потому что я закомментировала строчку content: ''; в приведенном классе. на эту строчку IDE ругалась. раскомментировала - все заработало.

Слава, век живи - век учись.
Записан
Славная трава...
Страниц: [1]   Вверх
  Печать  
« предыдущая тема следующая тема »
 
Форум программистов «Весельчак У» > Направления программирования > Web > HTML/DHTML > Тема: почему высота элемента div зависит от float вложенных в него элементов (FF)

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines