inline-block Value
Это стало возможным в течение длительного времени , чтобы создать сетку коробки , которая заполняет ширину браузера и оборачивает красиво (когда браузер изменяет размер), с помощью float свойства.
Тем не менее, inline-block значение display свойство делает это еще проще.
inline-block элементов, как встроенные элементы , но они могут иметь ширину и высоту.
Примеры
Старый способ - с помощью float (обратите внимание , что мы также должны указать clear свойство для элемента после того, как плавающие коробки):
пример
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
} Попробуй сам " Тот же эффект может быть достигнут при использовании inline-block значения display свойства (обратите внимание , что не clear , свойство не требуется):
пример
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
} Попробуй сам "