[Resolvido] Limitar numero de DIVs na linha dentro de outra DIV
Meu problema é simples de entender... Tenho um DIV pai e dentro dela quero colocar varios outros blocos de DIV... O problema é que se eu deixo o DIV pai com 'display: block" então as DIV de dentro fica 1 em baixo da outra, e seu eu deixo a DIV pai com "display: flex" as DIV de dentro fica um do lado do outro infinitamente...
Conclusão: Eu quero que as DIV de dentro fiquem uma do lado da outra mas sem passar do limite do tamanho da DIV pai, para que desse modo sempre que a DIV pai se ajustar ao tamanho da pagina então as DIV de dentro vão se alinhar de acordo com o espaço que tiverem.
OBS: Se possivel me mandem uma solução em que não preciso usar o Bootstrap.
OBS²: Se não tiver como fazer desse jeito que estou falando então podem me dizer se tem como limitar o numero de DIV por linha dentro da DIV pai? (Via CSS) Pq ai da pra eu usar o Media Queries para mudar o limite de DIVs de acordo com o tamanho da tela.
EXEMPLO:
<style>
body {
background-color: darkgray;
}
#pai {
border: solid 2px rgb(141, 0, 0);
background-color: rgb(40, 0, 104);
display: flex;
}
.filho {
border: solid 1px rgb(0, 0, 0);
background-color: rgb(99, 99, 99);
height: 300px;
margin: 10px;
max-width: 200px;
min-width: 200px;
}
</style>
</head>
<body>
<div id="pai">
<div class="filho">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa, id
aliquet turpis condimentum eu. Vestibulum commodo tortor non est consequat, dapibus bibendum ligula
dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa,</div>
<div class="filho">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa, id
aliquet turpis condimentum eu. Vestibulum commodo tortor non est consequat, dapibus bibendum ligula
dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa,</div>
<div class="filho">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa, id
aliquet turpis condimentum eu. Vestibulum commodo tortor non est consequat, dapibus bibendum ligula
dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa,</div>
<div class="filho">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa, id
aliquet turpis condimentum eu. Vestibulum commodo tortor non est consequat, dapibus bibendum ligula
dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa,</div>
<div class="filho">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa, id
aliquet turpis condimentum eu. Vestibulum commodo tortor non est consequat, dapibus bibendum ligula
dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa,</div>
<div class="filho">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa, id
aliquet turpis condimentum eu. Vestibulum commodo tortor non est consequat, dapibus bibendum ligula
dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa,</div>
<div class="filho">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa, id
aliquet turpis condimentum eu. Vestibulum commodo tortor non est consequat, dapibus bibendum ligula
dapibus.Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Duis bibendum hendrerit mauris, luctus posuere arcu dapibus in. Vestibulum faucibus mi massa,</div>
</body>
Vlw! Flw!Discussão (1)
Carregando comentários...