об этом сайте

Вы можете создать сетку коробок, которая впишется по ширине браузера и будет отлично обертываться при изменении размеров окна последнего. Это стало возможным в течении длительного времени, используя float, но сейчас с inline-block осуществить это еще проще. inline-block элементы, такие же как и inline элементы, но у них есть ширина и высота. Давайте взглянем на примеры обоих подходов.

Сложный путь (использование float)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я всплываю!

</div>

Я использую clear, поэтому я не всплываю над коробками, которые выше меня.

</div>

Легкий путь (использование inline-block)

Вы можете достичь того же эффекта, используя значение inline-block для display свойства.

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

Я inline block!

</div>

Я inline block!

</div>

Я inline block!

</div>

Я inline block!

</div>

Я inline block!

</div>

Я inline block!

</div>

Я inline block!

</div>

Я inline block!

</div>

Я inline block!

</div>

Я inline block!

</div>

<div>

Мне не нужно использовать clear в этом случае. Найс!

</div>

Вы должны проделать дополнительную работу для поддержки в IE6 и IE7 с использованием inline-block. Иногда люди говорят насчет inline-block срабатывания именуемого hasLayout, хотя вам всего лишь нужно знать , что это касается поддержки старых браузеров. Следуйте по предыдущей ссылке если вам важна поддержка в IE6 и IE7. Если это вас не интересует , то давайте двигаться дальше.

Назад Далее