Изучение CSS Разметки
Вы можете создать сетку коробок, которая впишется по ширине браузера и будет отлично обертываться при изменении размеров окна последнего. Это стало возможным в течении длительного времени, используя 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>Я всплываю!
</div> <div>Я всплываю!
</div> <div>Я всплываю!
</div> <div>Я всплываю!
</div> <div>Я всплываю!
</div> <div> Я использую clear, поэтому я не всплываю над коробками, которые выше меня.
Легкий путь (использование inline-block)
Вы можете достичь того же эффекта, используя значение inline-block для display свойства.
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
} <div>Я inline block!
</div><div>Я inline block!
</div><div>Я inline block!
</div><div>Я inline block!
</div><div>Я inline block!
</div><div>Я inline block!
</div><div>Я inline block!
</div><div>Я inline block!
</div><div>Я inline block!
</div><div>Я inline block!
</div> <div> Мне не нужно использовать clear в этом случае. Найс!
Вы должны проделать дополнительную работу для поддержки в IE6 и IE7 с использованием inline-block.
Иногда люди говорят насчет inline-block срабатывания именуемого hasLayout, хотя вам всего лишь нужно знать , что это касается поддержки старых браузеров. Следуйте по предыдущей ссылке если вам важна поддержка в IE6 и IE7. Если это вас не интересует , то давайте двигаться дальше.
Назад Далее
15 / 19inline-block: простое решение для сложных задач
Вы здесь
Главная → Блог → CSS → inline-block: простое решение для сложных задач
Раздел:
В статье рассмотрены особенности работы свойства display со значением inline-block. Также приводится несколько практических примеров с применением данного свойства и решением ряда типичных проблем верстки.
Что это такое и как оно работает?
Свойство display определяет, как должен вести себя элемент на странице по отношению к остальным, а именно как он расположится. Существует, в принципе, 2 основных типа представления элемента на странице: блочный и строчный.
Блочный элемент занимает все свободное место строки и перекидывает следующий элемент на новую. Строчные элементы располагаются в одну строку.
По отдельности эти формы представления блоков выполняют свои определенные задачи, однако в симбиозе могут охватывать достаточно широкий спектр задач. Именно поэтому был создан альтернативный вариант, который одновременно элементу присваивает функции блочного и строчного элементов — display со значением inline-block.
Блок внутри строчного элемента
Чтобы было понятнее типологию этого типа задач, представим, что нам надо вставить кнопку внутрь текста. То есть у нас будет массив какого-то текста, а где-то в определенном месте будет стоять кнопка с определенным задним фоном. Примерно это может выглядеть так
Как же это реализовать кодом? В этом нет ничего сложного, код довольно прост и в нем легко сориентироваться
HTML
<div> Lorem ipsum dolor sit amet, consectetuer <span>adipiscing elit</span>.Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis sociis <span >montes</span>, nascetur ridiculus mus. Donec quam felis, ultricies nec, <span>pellentesque</span> eu, pretium quis, sem. </div>
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis sociis <span >montes</span>, nascetur ridiculus
mus. Donec quam felis, ultricies nec, <span>pellentesque</span>
eu, pretium quis, sem.
</div>CSS
.block0 /*обвертка текстового блока*/ {
display:block;
width:300px;
margin:30px auto 0px auto;
position:relative;
text-align:center;
}
.button /*код кнопки*/ {
display:inline-block;
background:#679bce;
text-align:center;
color:#fff;
padding:3px 7px;
border-radius:3px;
height:23px;
cursor: pointer;
}Устанавливаем элемент по центру, не зная ширины
Может возникнуть задача, когда необходимо блок или кнопку установить по центру контейнера. В этом случае нам снова может прийти на помощь комбинация блочных и строчных свойств.
К примеру, у нас имеется картинка, а снизу от нее будет расположена кнопка, при нажатии на какую можно будет оставлять комментарий. Эта кнопка должна располагаться по центру блока.
Для этого нашей кнопке прописываем display: inline-block;. А родительскому тегу необходимо задать выравнивание текста по центру. Код этого решение будет выглядеть следующим образом:
HTML
<div> <img src="img.jpg" title="Пример" alt="Картинка"> <div>Комментировать</div> </div>
CSS
.block0 {
display:block;
width:250px;
margin:30px auto 0px auto;
position:relative;
padding:15px;
background:#eee;
text-align:center;/*центрирует нашу кнопку*/
}
.button {
display:inline-block;
// display: inline; /* для IE6-7,
которым неведом inline-block */
background:#679bce;
text-align:center;
color:#fff;
padding:3px 7px;
border-radius:3px;
height:23px;
cursor: pointer;
margin-top:9px;
} В браузере это будет выглядеть так:
Выравниваем элементы списка с разной высотой
Довольно часто встречается ситуация, когда элементы списка имеют разную высоту. Если не внести дополнительных правок, картина получается не из лучших.
Так как считается хорошим тоном дизайна сайта, когда у всех элементов одинаковые или пропорциональные отступы, а также все элементы выровнены под один уровень.
Для решения этой проблемы отлично подойдет свойство float, однако есть одно маленькое «но». Такое решение справедливо, если установлена фиксированная высота. Для универсальности будем рассматривать резиновые блоки, которые будут выравниваться при любой высоте и любом количестве текста.
Вторым решением, которое обойдет проблему высоты могут стать строки таблицы. Применение таблицы будет не рационально и отразит негативный эффект с точки зрения семантики. Можно конечно имитировать строки или ячейки таблицы через CSS, однако этому будет сопутствовать множество проблем.
Наиболее просто и действенный способ — опять обратиться к возможностям inline-block. Запишем следующий код:
HTML
<ul> <li><img src="img2.png" title="Пример1" alt="Картинка1"> Картинка 1</li> <li><img src="img2.
png" title="Пример2" alt="Картинка2">
Картинка 2</li>
…
</ul>CSS
.ul {
display:block;
width:330px;
margin:30px auto 0px auto;
position:relative;
padding:5px;
background:#eee;
text-align:center;/*центрирует нашу кнопку*/
}
li {
display:inline-block;
// display: inline; /* для IE6-7, которым неведом inline-block */
vertical-align:top;
text-align:center;
margin:5px 5px;
width:150px;
}
img {
display:block;
width:150px;
} А вот так будет выглядеть наш практический пример в браузере
Кроме того, при использовании inline-block в комплексе с line-height можно заставить работать свойство vertical-align, которое предназначено для работы в текстовом блоке или в ячейках таблицы.
В каких браузерах работает?
| 6.0+ | 4.0+ | 10.5+ | 4.0+ | 3.6+ | — | — |
Ключевые слова:
CSS приемы
CSS база.
Или что должен знать каждый верстальщик
Уровень сложности:
Средний
Еще интересное
блочных и встроенных элементов | Сообщение 328: Адаптивный веб-дизайн
Каждый элемент HTML имеет метод отображения на странице по умолчанию. Этот параметр по умолчанию определяется тем, считаются ли элементы
Все в коробке
При работе с HTML и CSS важно помнить, что каждый элемент на странице представляет собой блок.
Упражнение
Чтобы продемонстрировать это, откройте страницу Simmons Academics. Используя веб-инспектор, добавьте следующее правило CSS. Вы можете щелкнуть значок плюса на вкладке стилей, чтобы создать новое правило.
* {
граница: 1px сплошной красный !важно;
} Вы должны увидеть каждую вещь на странице с красной рамкой. Обратите внимание, что все они коробки.
Блочные и встроенные различия
Каждый элемент HTML имеет метод отображения на странице по умолчанию.
Этот параметр по умолчанию определяется тем, считаются ли элементы блочными или встроенными .
Блочные элементы
Элементы уровня блока имеют следующие свойства:
- Всегда начинать с новой строки
- Занять как можно больше горизонтального пространства (полную ширину контейнера или окна браузера, если контейнера нет)
- Будет учитывать свойства ширины и высоты CSS
- И горизонтальные, и вертикальные поля работают
Линейные элементы
Строчные элементы имеют следующие свойства:
- Начать вместо с новой строки
- Используйте ровно столько горизонтального пространства, сколько требуется для контента
- Не принимать свойства CSS ширины и высоты
- Поля будут работать по горизонтали, но не по вертикали
- Отступы работают со всех сторон, но верх и низ могут перекрывать другие элементы.
Свойство отображения
блок и встроенный значения Вы можете управлять поведением элемента на странице, изменяя его отображать свойство в CSS.
Вы можете настроить отображение блочного элемента как встроенного элемента, задав для свойства отображения значение встроенного.
р {
дисплей: встроенный;
} Вы также можете заставить встроенные элементы вести себя как элементы блочного уровня, используя свойство display.
я {
дисплей: блок;
} линейный блок Значение встроенный блок представляет собой странную комбинацию блочного и встроенного.
- Элементы принимают
ширинуивысотусвойства - Элементы могут иметь вертикальные и горизонтальные отступы со всех сторон
- Элементы не начинаются с новой строки
- Часто будет небольшой разрыв между
встроенными блокамиэлементов
нет Значение none свойства display приведет к тому, что элемент вообще не будет отображаться.
Это похоже на свойство видимости с одним важным отличием.
Установка display на none приведет к тому, что элемент будет полностью удален из потока документов, а также будет удалено место, где он должен был быть. Установка для свойства visible значения hidden сделает элемент невидимым, но пространство, занимаемое элементом, все равно будет зарезервировано.
Другие отображаемые значения
Существует множество других возможных значений свойства display, которые используются гораздо реже. Некоторые из этих свойств предназначены для использования при создании таблиц, но иногда используются для макета или для запуска несовместимости браузера.
- Просмотр полного списка отображаемых значений
встроенных блочных элементов — Javatpoint
следующий → ← предыдущая В этой статье мы обсудим свойство inline-block elements. Это очень полезное свойство CSS. Мы можем применить его к различным тегам. Это часть свойства отображения CSS. Использование: дисплей: встроенный блок При применении вышеуказанного свойства элемент будет вести себя как встроенный и блокировать свои дочерние элементы. Давайте разберемся со встроенными и блочными элементами. встроенные элементыЭлементы, которые не начинаются с новой строки, называются встроенными элементами. Они объединены как часть основного текста, а не как отдельное действие. Эти элементы занимают только необходимое пространство. Пробелы слева и справа могут быть добавлены к встроенному элементу, но нельзя добавить высоты к верхнему или нижнему отступу или полю встроенного элемента. Пример встроенных элементов:
|
