O inline-block Valor
Tem sido possível por um longo tempo para criar uma grade de caixas que preenche a largura do navegador e envolve bem (quando o navegador é redimensionada), usando a float propriedade.
No entanto, o inline-block valor da display propriedade torna isso ainda mais fácil.
inline-block elementos são como elementos inline, mas eles podem ter uma largura e uma altura.
Exemplos
A velha maneira - usando float (notar que nós também precisamos especificar uma clear propriedade para o elemento após as caixas flutuantes):
Exemplo
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
} Tente você mesmo " O mesmo efeito pode ser conseguido usando a inline-block valor da display propriedade (notar que nenhuma clear propriedade é necessário):
Exemplo
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
} Tente você mesmo "