Изучение CSS Разметки
Вы можете создать сетку коробок, которая впишется по ширине браузера и будет отлично обертываться при изменении размеров окна последнего. Это стало возможным в течении длительного времени, используя float, но сейчас с inline-block осуществить это еще проще. inline-block элементы, такие же как и inline элементы, но у них есть ширина и высота. Давайте взглянем на примеры обоих подходов.
.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 для 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>
Мне не нужно использовать clear в этом случае. Найс!
Вы должны проделать дополнительную работу для поддержки в IE6 и IE7 с использованием inline-block. Иногда люди говорят насчет inline-block срабатывания именуемого hasLayout, хотя вам всего лишь нужно знать , что это касается поддержки старых браузеров. Следуйте по предыдущей ссылке если вам важна поддержка в IE6 и IE7. Если это вас не интересует , то давайте двигаться дальше.
