Использование CSS inline-block для верстки

Уровень 0 · материалов: 5

В кластер входят документы, посвященные техническим аспектам применения CSS-свойства inline-block для позиционирования элементов и создания макетов страниц.

Общие признаки: свойство display: inline-block, создание сеток и макетов, проблемы совместимости с устаревшими браузерами, альтернатива float, устранение пробелов между элементами

Группа выше: CSS: макеты и позиционирование

Материалы

• #7094 — Cross-Browser Implementation of Inline-Block Layouts — Представитель этого кластера

  Кроссбраузерный inline-block — drfisher

  Смысл: The main idea is to provide a robust set of CSS hacks and property combinations to achieve a consistent 'inline-block' grid layout across legacy browsers (IE6, IE7, Firefox 2) and modern ones, overcoming specific rendering bugs and missing feature support.

  A technical guide on using CSS hacks and specific properties to ensure 'display: inline-block' layouts work consistently across old versions of Firefox and Internet Explorer.

• #8102 — Implementing a CSS Grid Using Inline-Block

  Новая сетка на inline-block: описание, пример использования, плюсы и минусы — babenkoma

  Смысл: The text describes the creation and logic of a custom responsive CSS grid based on `inline-block` to bridge the gap between the limitations of floats and the browser compatibility issues of early flexbox.

  The author introduces a BEM-based responsive CSS grid using `inline-block` that offers better vertical alignment than floats and wider browser support than flexbox.

• #6802 — Solving Mysterious Gaps Between Inline-Block Elements

  «Загадочные отступы» между инлайн-элементами — psywalker

  Смысл: The main idea is to explain why whitespace gaps occur between 'inline-block' elements in CSS and to provide a comprehensive set of technical workarounds to eliminate them, ranging from CSS property manipulation to HTML structural changes.

  The text explains that gaps between inline-block elements are caused by whitespace in the HTML code and provides seven different methods to remove them.

• #16221 — Comparing Inline-block as an Alternative to Float in CSS

  Inline-block как замена float — grokru

  Смысл: The main idea is to educate web developers on when to use 'inline-block' instead of 'float' for page layouts, emphasizing that while 'float' is traditional, 'inline-block' offers better control over centering and vertical alignment without breaking the document flow.

  A technical guide comparing CSS inline-block and float, highlighting the former's advantages in centering and document flow over the latter's wrapping capabilities.

• #30168 — Creating Horizontal Centered Menus Without CSS Floats

  Горизонтальное меню без float — GruZZ

  Смысл: The text explains how to create a horizontally aligned and centered navigation menu using CSS 'display: inline-block' instead of 'float: left', specifically addressing compatibility issues with legacy browsers like Firefox 2 and IE7.

  The author demonstrates how to use 'display: inline-block' and browser-specific hacks to create a centered horizontal menu that works across legacy browsers including IE7 and FF2.