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 2pxrgb(141,0,0);background-color:rgb(40,0,104);display: flex;}.filho {border: solid 1pxrgb(0,0,0);background-color:rgb(99,99,99);height:300px;margin:10px;max-width:200px;min-width:200px;}</style></head><body><divid="pai"><divclass="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><divclass="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><divclass="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><divclass="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><divclass="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><divclass="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><divclass="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>
Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
Olá a todos!
tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
<div class="planos" id="1" value="74">74</div>
<div class="planos" id="1" value="29">29</div>
<div class="planos" id="1" value="55">55</div>
<div class="planos" id="1" value="74">74</div>
<div class="planos" id="1" value="63">63</div>
<div class="planos" id="1" value="55">55</div>
<script type="text/javascript">
var valueElement = document.getElementsByClassName('.planos').getAttribute('value');
console.log(valueElement);
if (valueElement >= "70") {
document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50';
} else if (valueElement >= "50" && valueElement <= "69") {
document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00';
} else {
document.getElementsByClassName('.planos').style.backgroundColor == '#f44336';
}
</script>
Quero um código div ou qualquer outra forma, para atingi esse resultado do link
https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
Para ficar nesse local.
https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
Enfim espero uma ajuda sobre como posso fazer isso
Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
HTML
<div class="container">
<div class="row">
<div class="col-sm-2">
<a href="#anosiniciais" >
<img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt="">
</a>
</div>
<div class="col-sm-2">
<a href="#anosfinais" >
<img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section news-section" id="anosiniciais">
<div class="container">
<div class="row">
<div class="col-sm-2">
<a href="#" target="_blank">
<img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt="">
</a>
</div>
<div class="col-sm-2">
<a href="#" target="_blank">
<img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt="">
</a>
</div>
<div class="col-sm-2">
<a href="#">
<img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt="">
</a>
</div>
<div class="col-sm-2">
<a href="#">
<img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt="">
</a>
</div>
<div class="col-sm-2">
<a href="#">
<img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt="">
</a>
</div>
</div>
</div>
</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:
Vlw! Flw!
Editado por Numero 0800Compartilhar este post
Link para o post
Compartilhar em outros sites