CSS: плавающий div вправо заставляет контейнер div растягиваться на всю ширину экрана в IE - PullRequest
Новая
       13

CSS: плавающий div вправо заставляет контейнер div растягиваться на всю ширину экрана в IE

7 голосов
/ 04 февраля 2010

Я видел похожий вопрос здесь , и не увидел ответа.У меня возникла проблема, когда элемент перемещается вправо внутри родительского div, и это приводит к тому, что div растягивает всю ширину страницы в IE7.Этого не происходит ни в каких других браузерах (Firefox и Chrome).Я также разместил фотографии после вопроса, для справки.HTML-код, который я использую ниже: 

<div id="journal" class="journalIE">
    <div class="title_bar">
        <div>
            Testing
        </div>
        <div class="actions"></div>
        <div class="clear"></div>
    </div>
</div>

CSS-код, который я использую для этих тегов, также приведен ниже.Одна вещь, которую я заметил непротиворечивой между вопросом другого человека, упомянутым выше, и моей проблемой, заключается в том, что оба родительских div'а применяют позиционирование (у человека выше есть абсолютное, я исправил).Класс пропущен правильно.Если я заберу этот поплавок, моя коробка будет выглядеть как this .Но с добавленным поплавком он растягивает весь экран и выглядит как this .Является ли это известной ошибкой IE, потому что это не происходит ни в каком другом браузере, и это сводит меня с ума.

Для тех, кто интересуется, у меня действительно есть содержимое в div 'actions', но я удалил все докоренная проблема.

Любая помощь будет принята с благодарностью.Большое спасибо.

Ответы [ 3 ]

1 голос
/ 04 февраля 2010

Вам нужна ширина: * Плавающее поле должно иметь явную ширину (назначаемую через свойство 'width' или его собственную ширину в случае заменяемых элементов).*

через: W3C

0 голосов
/ 12 февраля 2010

Я не совсем уверен, что вы хотите, так как вы не объяснили, что вы хотели сделать с div "actions", но если вы хотели, чтобы div "actions" плавал прямо рядом с div "Testing" Я только что попытался создать отдельный класс .floatr, или он также будет работать, если вы просто примените стиль непосредственно к div. 

.floatr {
float: right;
}

с классом .floatr, примените это к div "actions": 

<div class="actions floatr"></div>

Я не знаю почему, но мне кажется, что div "actions" игнорирует настройку float в классе, который вы установили таким образом. Лично я предпочитаю применять несколько классов к div-элементам, что позволяет мне повторно использовать этот класс по сравнению с другими div-объектами, для которых мне нужен этот эффект, но я слышал, что некоторые браузеры игнорируют любые классы, объявленные после первого. Да ладно, я еще не сталкивался с этой проблемой в основных браузерах ...

Ой, подожди.

Я снова просмотрел код и думаю, что у вас просто возникла проблема с настройкой классов. Ваш div "actions" отсутствует в действии, попробуйте добавить запятую в CSS: 

#journal .title_bar, .actions
{
    float: right;
}

Я думаю, иногда, чтобы выяснить, что вам нужно применить эффект напрямую, чтобы убедиться, что он может вести себя так, как вы ожидаете, а затем, вероятно, подумать, что это какая-то синтаксическая ошибка синтаксиса, если она работает. хех.

0 голосов
/ 04 февраля 2010

Сделай это 

<div id="journal" class="journalIE"> 
<div class="title_bar"> 
    <div class="Test"> 
        Testing 
    </div> 
    <div class="actions"></div> 
    <div class="clear"></div> 
</div>

, а затем добавить класс Css

.test { плавать: право; }

должен это сделать, дайте нам знать, если он не работает.

MNK

...