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

Я видел подобный вопрос здесь, и не видел ответа. У меня возникла проблема, когда элемент перемещается вправо внутри родительского 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 применяют позиционирование (у человека выше есть абсолют, я исправил это).

#journal
{
    z-index: 1;
}

.journalIE
{
    right: 1px;
    bottom: 18px;
    position: fixed;
}

#journal .title_bar
{
    background: #F3F3F3;
    border: 1px solid #C5D6E8;
    color: #363638;
    font-size: 11pt;
    font-weight: bold;
    height: 20px;
    padding: 4px;
    margin-bottom: 4px;
}

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

.clear
{
    clear: both;
}

Обратите внимание, что класс 'actions' всплывает правильно. Если я заберу этот поплавок, моя коробка выглядит следующим образом. Но с добавленным поплавком он растягивает весь экран и выглядит следующим образом. Является ли это известной ошибкой IE, потому что это не происходит ни в каком другом браузере, и это сводит меня с ума.

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

Будем очень благодарны любой помощи. Спасибо большое.

Источник

3 ответа

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

через: W3C

Источник

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

.floatr {
float: right;
}

с классом.floatr примените это к "действиям" div:

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

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

Ой, подожди.

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

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

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

Источник

Сделай это

<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 {float: right; }

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

MNK

Источник
Другие вопросы по тегам