Percebi que nesse exercício consegui chegar no mesmo resultado somente colocando duas propriedades no css.
div {
width: 100px;
height: 100px;
/* Para deixar o texto centralizado na div,
podemos colocar um line-height igual à altura
dela. Só funciona bem se o texto tiver uma
linha só.
*/
line-height: 100px;
text-align: center;
font-size: 25px;
float:left;
}
.container {
width: 400px;
}
.primeiro {
background-color: red;
}
.segundo {
background-color: blue;
}
.terceiro {
width: 200px;
height: 200px;
line-height: 200px;
background-color: green;
float:right;
}
.quarto {
background-color: orange;
}
.quinto {
background-color: magenta;
}Mas quando eu aumento o tamanho(width) do container, a cada 100px, as caixas vão se distanciando.
Tem outra maneira de fazer que, mesmo eu aumentando o tamanho do container, as caixas permaneçam juntas?
