Очистка плавающих объектов в IE7 без прерывания потока текста - PullRequest
Новая
       13

Очистка плавающих объектов в IE7 без прерывания потока текста

0 голосов
/ 20 апреля 2011

Пожалуйста, укажите следующий пример :

Требования:

  • У одного элемента всплывает право.
  • Сначала очистите еще один элемент и поплавок влево.
  • Распространение текста и перенос всех всплывающих элементов.

Это похоже на мертвый простой пример использования плавающих элементов в макете, и все же, похоже, нет никакого способа сделать это в IE7.

В данном примере IE7 не соблюдает прозрачность, и оба элемента всплывают наверх: 

    <!-- Floated blocks -->
<div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<div style="float:left; clear:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
    <!-- Wrapping text -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisi tellus. Ut ac iaculis erat. Integer nec turpis mi, quis placerat eros. Donec suscipit eros vel nulla vulputate cursus. Aenean ut augue nisi, a sagittis velit. Mauris eget velit at felis feugiat consequat. Sed interdum lobortis porttitor. Vestibulum ultrices posuere ipsum id posuere.</p>
<p>Nam imperdiet, orci sed faucibus tempus, arcu est pretium mauris, in mollis tellus augue imperdiet elit. Maecenas mi nunc, rhoncus in feugiat et, varius at lacus. Etiam at iaculis libero. Phasellus eu ipsum tortor. Maecenas non purus dolor. Suspendisse risus felis, varius et porttitor eu, ultricies a orci. Nullam ac ipsum diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis suscipit eros consequat sollicitudin. </p> 
<p>Morbi facilisis aliquet rutrum. Vestibulum dignissim neque velit. Nunc auctor, ante nec placerat commodo, metus felis dignissim metus, sit amet aliquet sem nisi eget neque. Morbi diam massa, porttitor ac egestas at, bibendum id mauris. Phasellus at leo at est lobortis ullamcorper at vel dolor. Suspendisse tincidunt lobortis quam a luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id metus id mauris rhoncus adipiscing ac quis arcu. Phasellus magna lectus, venenatis non tempor id, euismod ut quam.</p>
<p>Vivamus gravida dui ut dui facilisis ullamcorper. Nulla facilisi. Nunc eu sagittis ante. Fusce sit amet velit vel lacus congue sodales. Integer sollicitudin varius orci. Sed tellus erat, porttitor a ultricies nec, pellentesque nec felis. Sed at arcu ipsum. Etiam lorem leo, egestas et euismod nec, rhoncus dictum mauris. Fusce vestibulum lectus eget magna sollicitudin vulputate pulvinar augue tempus. Integer urna lacus, tincidunt eget fermentum eu, condimentum et eros. Ut vitae tortor porttitor dui elementum sollicitudin nec a ante.</p>

Я открыт для ЛЮБОГО решения, которое включает предполагаемый макет. Спасибо -

Ответы [ 3 ]

2 голосов
/ 20 апреля 2011

Боюсь, это невозможно: (

см. здесь для множества тестовых случаев, которые конкретно указывают, где IE7 дает сбой, если бы было решение, на которое Бруно ссылался бы, я уверен. Кстати, эта страница ведет к другой с еще большим

короче:

clear: both (или направление) потерпит неудачу, если только предыдущее значение не является тем же направлением

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

Я даже не могу придумать, как имитировать это сценарием

2 голосов
/ 21 апреля 2011

Поскольку ваши блоки имеют фиксированную высоту, вы можете перемещать div шириной 0 с той же высотой, что и div, плавающий вправо. 

<div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
<div style="float:left; display:block; background:transparent; width:0; height:100px;" >&nbsp;</div>
<div style="float:left; clear:both; display:block; background:#FF0000; width:200px; height:100px;" ></div>
1 голос
/ 20 апреля 2011

РЕДАКТИРОВАТЬ:

Я не уверен, что это именно то, что вы хотите, но это выглядит "ОК" в моем браузере IE: 

    <p><div style="float:right; display:block; background:#FF0000; width:200px; height:100px;" ></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisi tellus. Ut ac iaculis erat. Integer nec turpis mi, quis placerat eros. Donec suscipit eros vel nulla vulputate cursus. Aenean ut augue nisi, a sagittis velit. Mauris eget velit at felis feugiat consequat. Sed interdum lobortis porttitor. Vestibulum ultrices posuere ipsum id posuere.</p>

    <div style="float:left; clear:right; display:block; background:#FF0000; width:200px; height:100px;" ></div><p>Nam imperdiet, orci sed faucibus tempus, arcu est pretium mauris, in mollis tellus augue imperdiet elit. Maecenas mi nunc, rhoncus in feugiat et, varius at lacus. Etiam at iaculis libero. Phasellus eu ipsum tortor. Maecenas non purus dolor. Suspendisse risus felis, varius et porttitor eu, ultricies a orci. Nullam ac ipsum diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed convallis suscipit eros consequat sollicitudin. </p> 
    <p>Morbi facilisis aliquet rutrum. Vestibulum dignissim neque velit. Nunc auctor, ante nec placerat commodo, metus felis dignissim metus, sit amet aliquet sem nisi eget neque. Morbi diam massa, porttitor ac egestas at, bibendum id mauris. Phasellus at leo at est lobortis ullamcorper at vel dolor. Suspendisse tincidunt lobortis quam a luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id metus id mauris rhoncus adipiscing ac quis arcu. Phasellus magna lectus, venenatis non tempor id, euismod ut quam.</p>
<p>Vivamus gravida dui ut dui facilisis ullamcorper. Nulla facilisi. Nunc eu sagittis ante. Fusce sit amet velit vel lacus congue sodales. Integer sollicitudin varius orci. Sed tellus erat, porttitor a ultricies nec, pellentesque nec felis. Sed at arcu ipsum. Etiam lorem leo, egestas et euismod nec, rhoncus dictum mauris. Fusce vestibulum lectus eget magna sollicitudin vulputate pulvinar augue tempus. Integer urna lacus, tincidunt eget fermentum eu, condimentum et eros. Ut vitae tortor porttitor dui elementum sollicitudin nec a ante.</p>

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

...