Ошибка с плавающей точкой в ​​div произвольной ширины, расположенном абсолютно - PullRequest
Новая
       12

Ошибка с плавающей точкой в ​​div произвольной ширины, расположенном абсолютно

1 голос
/ 19 июля 2011

снова проблема с браузерами IE версии 6 и 7

. Посмотрите на пример сразу, попробуйте изменить размер окна и т. Д.

предварительный просмотр (проще открытьв IE таким образом)

код

HTML: 

<div class="container">
    <div class="left-menu">
        <ul>
            <li>El1</li>
            <li>Element 2</li>
            <li>3</li>
        </ul>
    </div>
    <div style="margin-right: 60px;">Тест Тест</div>
</div>

CSS: 

.container{
    position:absolute;
    top:100px;
    left:100px;

    outline: 1px solid red;
    background-color:pink;
}
.left-menu{
    outline: 1px solid green;
    background-color:#AAA;

    width: 50px;
    float: right;
}

СейчасЯ не понимаю 2 вещи

  1. Что происходит с элементом float?поле никогда не бывает слишком маленьким, потому что поле смежного div больше ширины ul div.Но когда окно достаточно маленькое, элемент float кажется плавающим по краю окна, а не по краю контейнера, но если вы прокрутите немного вправо, когда окно маленькое, вы увидите, что контейнер достаточно широк.

  2. Менее важный вопрос, почему это так широко?Разве он не должен быть таким же широким, как его содержимое?

Единственное исправление, которое я придумал, - дать моему абсолютному div ширину, но есть проблема.Это должно измениться с содержанием, скажем, если есть изображение около плавающего div.

И будет изображение =) Этот обходной путь ширины, конечно, позволяет использовать тонны JavaScript, чтобы изменить размер каждого элемента в болеесложная структура, чем показано в примере, но мне интересно, может ли вместо этого использоваться CSS?

1 Ответ

0 голосов
/ 09 октября 2012

Internet Explorer имеет проблемы с div и float, особенно в старых версиях IE. Всякий раз, когда у меня возникают проблемы с плавающей точкой и делением, которые не очищают друг друга должным образом, я полагаюсь на метод Clearfix .

Добавьте clearfix css в основной файл css, затем добавьте класс .clearfix в .container, чтобы он выглядел как <div class="container clearfix">.

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

Вы увидите, что Clearfix заставляет родительский div (.container) полностью обернуться вокруг плавающих элементов внутри.

Надеюсь, это поможет!

...