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 "