Jump to content
halfar

aumentar tamanho da div automaticamente

Recommended Posts

eu preciso aumentar o tamanho de uma div de maneira automática. É assim:

 

estou criando algumas divs dentro de uma laço for, no conteudo da div eu puxo algumas informações do banco de dados. Exemplo:

Citar

 

for($i=0;  $i<=count($rows); $i++){

<div id=nome class=nome><?php echo "Texto";?></div>

}

 

 

Então veja, que dentro do laço for vai criando várias divs. Até aqui tudo bem, as divs aparecem normalmente uma embaixo da outra.

O problema é que cada div, sua largura uma é diferente da outra. A primeira pode ter 10 pixels, a segunda 303 pixels, a terceira pode ter 12 pixels, e assim sucssivamente, o valor é 

aleatório.

Tem como fazer isto??

Share this post


Link to post
Share on other sites

E qual a dúvida? ainda não entendi..

se você der "float" ou "display: inline-block", isso acontece naturalmente.

Share this post


Link to post
Share on other sites
1 hora atrás, William Bruno disse:

E qual a dúvida? ainda não entendi..

se você der "float" ou "display: inline-block", isso acontece naturalmente.

 

ah...tá.... por isso que é bom falar com quem sabe...vou testar...

 

grato.

Share this post


Link to post
Share on other sites

William Bruno, mas como mudar o tamanho da div? Preciso alterar a largura da div.

Dentro do laço for, a largura de cada div muda a cada passagem do laço for...

Share this post


Link to post
Share on other sites

Ainda não consegui entender o que você quer... você quer a div ajustada automaticamente de acordo com o conteúdo dela ou você quer um padrão para todas as divs independente do conteudo dela?

 

Mas acredito que ambas as duas se resolve no css

Share this post


Link to post
Share on other sites

execute isso:

<style>
.largura {
    display: inline-block;
    border: 1px solid #000;
}
</style>
<div class="largura">lorem</div>
<div class="largura">lorem ipsum dolor</div>
<div class="largura">lorem ipsum</div>
<div class="largura">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ipsa error assumenda deleniti voluptatibus rerum quibusdam minus </div>
<div class="largura">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit vero voluptatem quia eos beatae, esse omnis sapiente debitis eius non! Est reiciendis molestiae recusandae perspiciatis ut rerum, sit expedita facere?</div>

cada uma tem uma largura ai.
Se não for, tente reproduzir um screenshot do que você precisa.

Share this post


Link to post
Share on other sites

bem, pelo o que percebi, a largura no seu exemplo aumenta de acordo com o texto inserido.

No meu caso não vai texto algum. Será apenas uma div com um fundo de alguma cor.

Falando exatamente o que quero, esta div irá simular uma barra de progressão,  sabe quando está fazendo o download de algum arquivo e a barra vai crescendo enquanto faz o download? Seria mais ou menos isso, no caso não precisa mostrar ela aumentando, pode ser fixa, porém seu tamanho de largura  será variável de acordo com valores que irei extrair do banco de dados.

 

por exemplo:

caixa de laranjas cabem 200 laranjas.

porém na caixa tem apenas 50 laranjas.

 

portanto, 50/200 = 25, ou seja, a caixa contém 25% do seu espaço ocupado.

 

A barra será portanto de 25% de comprimento.

 

Num proximo registro a caixa poderá ter 80 laranjas que irá dar um outro resultado percentual, fazendo com que a

barra da div seja de outro tamanho.

 

Não sei como são feitas estas barras progressivas que a gente costuma ver nos downloads,  então estou bolando esta idéia com a div.

 

Share this post


Link to post
Share on other sites
16 minutos atrás, halfar disse:

bem, pelo o que percebi, a largura no seu exemplo aumenta de acordo com o texto inserido.

No meu caso não vai texto algum. Será apenas uma div com um fundo de alguma cor.

Falando exatamente o que quero, esta div irá simular uma barra de progressão,  sabe quando está fazendo o download de algum arquivo e a barra vai crescendo enquanto faz o download? Seria mais ou menos isso, no caso não precisa mostrar ela aumentando, pode ser fixa, porém seu tamanho de largura  será variável de acordo com valores que irei extrair do banco de dados.

 

por exemplo:

caixa de laranjas cabem 200 laranjas.

porém na caixa tem apenas 50 laranjas.

 

portanto, 50/200 = 25, ou seja, a caixa contém 25% do seu espaço ocupado.

 

A barra será portanto de 25% de comprimento.

 

Num proximo registro a caixa poderá ter 80 laranjas que irá dar um outro resultado percentual, fazendo com que a

barra da div seja de outro tamanho.

 

Não sei como são feitas estas barras progressivas que a gente costuma ver nos downloads,  então estou bolando esta idéia com a div.

 

 

Diga exatamente o que quer fazer... para a div aumentar de tamanho até onde sei ela precisa de conteúdo!

 

Se o que você que é uma barra de progresso, sugiro que faça de outra forma.

Segue um exemplo pra barra de progresso usando bootstrap:

http://getbootstrap.com/components/#progress

Share this post


Link to post
Share on other sites

e pq ao invez de ir somando,  você pega o valor ja final aquilo que ja tem de laranja e apartir dai faz a barra

que, de forma básica, seria uma div com uma certa altura e dentro dela uma outra com  a mesma altura e largura de X% que é o valor do seu calculo e cor de fundo diferente da outra

https://jsfiddle.net/g81r2jmu/

só ficaria a largura pra ser definida na tag depois que o php fizer o calculo

Edited by Electronic

Share this post


Link to post
Share on other sites

bem pessoal, veja só: a forma como se faz o calculo não é importante, porque esta parte já tenho resolvido.

a questão é fazer a div assumir o tamanho na largura de acordo com a resposta do cálculo.

 

fiz assim:

neste ponto do programa já foi feita o acesso ao banco de dados, então no laço for abaixo recupero os valores do bd e faço o estilo da div (se bem que desta forma não acho legal, mas não encontrei outra solução ainda)

Citar

 

for($i =0; $i <=count($rows)-1; $i++){

...recupero valores do BD

$largura[$i] = $rows[$i]["largura"];

 

echo "<style>";
echo ".barra {";
echo "width: " . $largura[$i]  . "px";
echo "}";
echo "</style>";


echo    "GRUPO: " . $rows2[$i]["grupo"]  . "<div  class='barra'></div>";
 

}

 

 

 

 

 

existe uma classe já previamente definida no arquivo estilos.css, porém contém as informações basicas da div, não contém valor de largura, pois o valor da largura será definida dentro do laço for.

 

o arquivo de estilos é este:

Citar

.barra {
   height: 30px;
  background-color: #ADFF2F;
  left: 122px;
  border: 1px solid #000000;
  
}


Agora vejam só: o código funciona de boa, os valores da largura são captados corretamente, a div é montada corretamente no html, só que a div não fica no tamanho correto, de acordo com a largura específica de cada uma, na realidade ambas ficam com o mesmo tamanho.

 

Veja o código html como ficou, apos executar a pagina:

<style>.barra {width: 24px}</style>GRUPO: A<div class='barra'></div><style>.barra {width: 10px}</style>GRUPO: B<div class='barra'></div> 

 

A resposta do codigo html está correta, note que uma div tem o valor width com 24 e outra com 10. Mas ambas

aparecem com o mesmo tamanho.

 

Para ser sincero, não sei se fica bem colocar o style dentro do laço for. Antes eu tinha colocado os valores dos estilos dentro da própria div, assim: style="width: $largura px"...etc...

funcionava também, porém também as divs ficavam n mesmo tamanho...

 

 

 

Share this post


Link to post
Share on other sites

resolvido.

consegui fazer de melhor maneira, retirando a declaracao dos estilos dentro do laço for (coisa que eu não estava gostando mesmo).  Mantive o arquivo de estilos base num arquivo css, e  para alterar a largura dinamicamente, uma

vez capturado do banco de dados o tamanho da largura foi só montar a div assim:

 

Citar

echo    "GRUPO: " . $rows2[$i]["grupo"]  . "<div class='barra' style='width: $largura[$i]" . "px'></div>";

 

O problema estava na maneira como se escreve este código acima,  apesar do navegador mostrar tudo correto, mas estava dando problema na hora de exibir. Foi só mudar o jeito de escrever o código. É uma daquelas questões que crreio se deve usar as barras de scape... mas consegui fazer funcionar da maneira acima.

 

A maneira errada como havia escrito estava assim:

Citar

echo    "GRUPO: " . $rows2[$i]["grupo"]  . "<div class='barra' style='width: $largura[$i] px; '></div>";

 

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By phpcoder
      OLÁ, gostaria de pegar os valores desses input e enviar no formulario apenas por um unico input hidden, um input com id diferente. Meu codigo está assim, gostaria de saber se é isso mesmo ou o que falta.
      input class="gp_input_grid" id="cod1" name="cod1" autofocus onKeyUp="javascript:pulacampo('cod1','cod2')" maxlength="1" type="tel" value="">
      input class="gp_input_grid" id="cod2" name="cod2" maxlength="1" onKeyUp="javascript:pulacampo('cod2','cod3')" type="tel" value=""
        
      input class="gp_input_grid" id="cod3" name="cod3" maxlength="1" onKeyUp="javascript:pulacampo('cod3','cod4')" type="tel" value="">
        input class="gp_input_grid" id="cod4" name="cod4" maxlength="1" onKeyUp="javascript:pulacampo('cod4','cod5')" type="tel" value=""
        input class="gp_input_grid" id="cod5" name="cod5" maxlength="1" onKeyUp="javascript:pulacampo('cod5','cod6')" type="tel" value=""
        
      input class="gp_input_grid" id="cod6" name="cod6" maxlength="1" onKeyUp="javascript:pulacampo('cod6','pulou')" type="tel" value=""
       
       input type="hidden" name="dados" id="dados" value="<?=$_POST['cod1']; ?><?=$_POST['cod2']; ?><?=$_POST['cod3']; ?><?=$_POST['cod4']; ?>"

      GOSTARIA DE SABER SE É ISSO MESMO, OU O QUE FALTA. 
    • By douglas79
      Bom dia,
       
      Estou seguindo uma vídeo aula no Youtube e o instrutor lá colocou uma sequência de div's (seja id ou class), o seletor background não funciona.

      Vou postar o código até o momento:
       
      @charset "utf-8";
       
      body, ul{padding:0;margin:0;background: #e2e2e2;list-style: none;}
      #geral{overflow: hidden;}
      #geral #topo{width:1018px;margin:0 auto;overflow: hidden;}
      #geral #topo #logo, #menuTopo{float:left;width:400px;}
      #geral #topo #logo{background:#ccc;}
      #geral #topo #menuTopo{}
      #geral #topo #menuTopo li{float:left;padding:5px;}

      Alguém pode me tirar essa dúvida???
      Desde já, agradeço!
    • By a52
      Boa tarde. Estou tentando imprimir rodapé de forma fixa em todas as páginas. Com o código abaixo eu consigo fazer, porém, acaba sobrescrevendo algumas linhas da tabela. Tentei utilizar @pages mas lendo sobre o assunto descobri que nas versões mais recentes do chrome já não funciona mais.
       
      <style type="text/css" media="print">     table { page-break-inside:auto; margin-bottom: 10px; }     tr    { page-break-inside:avoid; page-break-after:auto; }     thead { display:table-header-group }     tfoot { display:table-footer-group }     /* .fixedhh td { height: 50px; } */     div.footer {         display: block;         position: fixed;         bottom: 0;         /* height: 45px; */     }          /* @media print {         div#pages {             display: table-footer-group;             counter-increment: page;         }         div#pages:after {             content:"Página " counter(page);          }     } */ </style> <div class='footer'> <label style='font-family:verdana;font-size:10px;font-weight:bold;'>Assinatura: ________________________________________________<br>Por ser verdade, assino e dou fé ao presente documento</label> <div id='pages' class='pages'></div> </div>   É um código legado que armazena todo o conteúdo numa tag $html em php e depois imprime na tela. Existe alguma outra alternativa para esse caso? Obrigado pela atenção.    
    • By higordiasz
      Boa Tarde,
      Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato.
       
      Segue meu código CSS responsável pelas div.
       
      .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML:
       
      <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: 
       

       
      Alguem sabe oq posso alterar para alinhar elas corretamente ? 
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.