Плавать над двумя элементами - PullRequest
Новая
       4

Плавать над двумя элементами

0 голосов
/ 09 ноября 2009

Моя проблема довольно сложна для объяснения, поэтому я покажу вам пример: http://ewolf.bplaced.de/misc/float.htm

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

На самом деле я не совсем уверен, является ли способ, которым я сейчас это сделал, допустимым для XHTML / CSS, но он работает - по крайней мере, в Firefox. В IE6 зеленое поле расширяется, чтобы уместиться в целое синее поле - как я могу исправить это в IE6 или найти другое решение для правильного отображения во всех браузерах?

1 Ответ

0 голосов
/ 10 ноября 2009

Вы, вероятно, не сможете сделать это, в зависимости от того, что именно вы имеете в виду.

Причина, по которой он не работает, заключается в волшебном свойстве IE6 hasLayout . Любой элемент, имеющий «макет» в IE6, будет содержать свои плавающие элементы. Компоновка запускается свойствами CSS, такими как ширина или высота. См. Связанную статью для получения дополнительной информации.

См. " кислотные поплавковые тесты " для страницы, посвященной этой конкретной проблеме.

Если вы удалите ширину и высоту из center div, вы увидите, что он больше не содержит float, потому что у него больше нет макета.

Конечно, то, что вы в итоге получаете, не то, что вы хотите. Вы можете позаботиться о ширине, добавив div-обертку вокруг обеих строк и установив вместо этого ширину. Если вы также хотите установить фиксированную высоту, вы можете добавить дополнительный div внутри каждой строки (как синяя ячейка в первом ряду) и установить вместо этого высоту.

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

В любом случае, это то, как HTML должен выглядеть в итоге, с шириной и высотой, удаленными из класса center. Я сохранил оригинальную структуру и добавил встроенный CSS, чтобы продемонстрировать изменения: 

<div style="width: 800px">
    <div id="row1">
        <div class="center">
            <div id="box">
                Lorem ipsum ...
            </div>
            <div style="height: 100px">
                Duis autem ...
            </div>
        </div>
    <div id="row2">
        <div class="center" style="height: 100px">
            Duis autem ...
        </div>
    </div>
</div>
...