очистка вложенных поплавков

Question

Я создаю мозаичную сетку изображений, очень похожую на галерею изображений с сеткой миниатюр, и мне нужно, чтобы изображения были перенесены в следующую строку после 3 изображений. Так что я плаваю кучу div, каждый из которых содержит изображение, а затем очищаю плавающий вручную после трех изображений.

Проблема в том, что я работаю в довольно запутанном существующем шаблоне, который уже использует float для упорядочивания всего. Очистка поплавка в моей сетке скремблирует всю страницу, предположительно потому, что до сих пор он очищает все поплавки на странице. Что я могу сделать?

Я очищаю поплавок, используя пустой div. а именно:

<div style='clear:right'>

Может ли один из других методов очистки поплавков работать лучше?

Answer 1

1. Создать подходящий контейнер div (если у вас его еще нет)
2. Установить ограничительную ширину на контейнер div - равно что 3 изображения занимает.
3. Разрешить всем изображениям плавать - они будут автоматическая упаковка.
4. Установите контейнер с помощью 'overflow: hidden', который очистит поплавки для вас.

Упрощенная версия может выглядеть так:

<style>

div#container {  
  overflow: hidden; 
  width: 300px; 
}

div#container img { 
  float: left; 
  width: 100px; 
}

</style>

<div id="container"> 

  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />

</div>

Answer 2

Если поддержка IE> = 8 вам подходит, вы можете рассмотреть возможность использования display: table вместо float. Поскольку вы хотите отобразить сетку, это более подходящий способ сделать это.

http://www.quirksmode.org/css/display.html#table

Answer 3

Я бы попробовал использовать display: inline-block; для стилизации элементов, содержащих каждое изображение. Пример HTML-кода для одного контейнера:

<style>
.figure {
    display: inline-block;
}
</style>

<div class="figure">
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" />
</div>

Теперь есть несколько ловушек, использующих это с IE6, IE7 и Firefox 2:

• IE 6 и 7 будут стилизовать только встроенные элементы, у которых запущен hasLayout, я имею в виду, что вы увидите встроенный блок поведение , если вы сделаете это:

<!--[if lte IE 7]>
.figure {
    display: inline;
    zoom: 1; /* triggering hasLayout */
}
<![endif]-->

• Firefox 2 не понимает display: inline-block;, поэтому вам придется предшествовать последнему другой командой отображения:

.figure {
    display: -moz-inline-stack;
    display: inline-block;
}

• теперь Firefox 2 будет вас немного раздражать. Во-первых, у вас должен быть только один дочерний элемент в вашем элементе .figure, иначе дочерние элементы ... будут складываться Так что если у вас есть легенда под вашим изображением, вставьте div между div.figure и img + p

    <div>
        <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" />
        <p>Second child of .figure>div and not .figure</div>
    </div>
</div>

Во-вторых (все еще только в Fx2), вы будете время от времени замечать, что вы больше не можете ни выделять текст внутри элемента -moz-inline-stack'ed, ни щелкать ссылки, которые он может содержать. Исправление заключается в том, чтобы позиционировать добавленный div относительно:

    .figure div {
        position: relative;
    }

Конечно, условный комментарий для IE6 / 7 должен появляться после обычного CSS, иначе это будет мало чем помочь.

И, наконец, если у вас нет элегантного решения, используйте СТОЛ. Простая таблица только с тд и без го. Если это произойдет, то:

• IE6 и 7 не нравятся display: table-sth
• ваша CMS вызывает проблемы с тем, что в противном случае нормально работало бы на другом сайте
• Поддержка Firefox 3 для inline-block не помогает

чем да, для всех лучше, если вы используете таблицу, и никакое половинное решение не создает проблем для половины ваших пользователей;)

Answer 4

Если ваша разметка такая:

div
 img
 img
 img
 row break
 img
 img
 img
 ...

Затем вам нужно добавить это после каждых трех блоков:

<br class="clear" />

Но если ваша разметка такая:

div
 div
  img
  img
  img
 div
  img
  img
  img
 ...

.. тогда вам просто нужно применить следующий класс .clear к своим внутренним DIV.

В любом случае, добавьте это в свою таблицу стилей:

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

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