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 GGerminiani
      Boa tarde.
      Nas minhas páginas, quero manter uma página php padrão, para chamar o menu do site, porém, alguns pequenos detalhes estão dando erro.
       
      Tenho a página menu.php:
       
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=1"> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> body{background: black} div.capa { position: relative; left: 50px; } div.logo { position: absolute; top: 20px; } div.login { position: absolute; left: 10px; float: right; color: yellow; font-size: 12px; } </style> </head> <body> <div class="fixed-top"> <div class="capa"> <img src="https://img.freepik.com/fotos-gratis/widescreen-3d-rendem-de-uma-paisagem-surreal-com-a-lua-a-noite_1048-5350.jpg?size=626&ext=jpg"> <div class="logo"> <a href="index.php"> <img src="https://image.flaticon.com/icons/png/128/87/87390.png"> </a> </div> </div> <nav class="navbar navbar-expand-lg navbar-light bg-danger"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Alterna navegação"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="./index.php">Home<span class="sr-only">(Página atual)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#home">Página 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> DropDown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Sub 1</a> <a class="dropdown-item" href="#">sub 2</a> </div> </li> </ul> </div> </nav> </div> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/bootstrap.js"></script> </body> </html>  
      Na página index.php, por exemplo, tenho o seguinte código:
       
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=1"> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <title>Page Title</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> body{color:white} </style> </head> <body> <?php include_once("menu.php") ?> <p> Cain beetle hugo batman cobblepot shadow robin gearhead ra. Bruce, lynx drake oracle chimera hugo barrow. Oswald edward elongated lillian gordon cluemaster czonk bennett. Calendar scorn of deadshot aiko montoya wayne doom firefly, fox kobra? Wayne manor lex shrike hangman pit amanda. Zatanna todd wing cain killer al thorne wing luthor cluemaster nyssa blake spoiler? Ventriloquist spectre boomerang pit wing rose. Raatko atom selina grey kane. Aiko carmine czonk lucius! Zeus toymaker hush echo amanda drake fairchild. Scarecrow quinn freeze ghul, chimera arrow knight lillian tally hood solomon chill boomerang! </p> <p> Swamp jester lucius metallo zatanna of robin outsider prey. Echo scorn dent lucius echo snake ra grundy prey thorne helena. Collector fox mad dent arrow? Gotham hammer batcave basil atomic. A basil blue flash canary aiko. Kane pit jester kyle doom fairchild atkins nocturna damian spoiler hood. Gargoyle bullock barbara aiko arkham? Ventriloquist knight nyssa bullock freeze cypher catwoman gargoyle hatter tumbler lynx killer nyssa. Barbara ragdoll dick bennett. Fright harvey america abdullah fox diamond alcor falcone; killer penguin martha. Carmine charlatan joe atom? Kane wayne martha league batcave prey alfred riddler? Kyle rose, ivy shrike america. Riddler knight diamond green gargoyle birds zatanna grayson grey katana sinestro. Toymaker rumor lex calendar. Young chill atom rumor! Grayson, atomic fairchild atkins lantern phantom gordon boomerang. Amanda jester barrow creeper tim carmine harley, wayne red creeper batmobile birds? Abattoir wing cypher, blink jester harlequin alcor. Moth atom spoiler lazarus. </p> <p> Basil wayne atom blink atkins. Swamp ra ventriloquist luthor katana batgirl cain? Barrow nocturna ra lucius. Elongated harley harlequin atomic alcor. Ragman gordon cain abdullah. Nyssa mugsy rhino montoya bennett. Thomas dent arkham katana luthor america master outsider. Flash sinestro deadshot thorne zeus abattoir society knight. Ghul damian boomerang shadow creeper deadshot society owl firefly bat poison. </p> <p> Mister fox flash jester vicki scorn. Basil bullock supergirl gargoyle czonk deadshot lazarus rhino superman thomas league superman. Fox phantom carmine toymaker lantern shiva, bennett quinn zatanna? Rhino the arkham jim two! Ghul temblor lazarus raatko, kane nigma bat tim killer sinestro mask alcor thomas? Ali nocturna, grayson night outsider gearhead. Arkham deadshot, damian selina birds shiva. Zatanna grundy ra bane ra deadshot. Wayne fox hatter! </p> <p> Aquaman alfred toymaker cain bennett hammer master. Young alcor scorn rumor maxie anarky batmobile. Flash mad echo black sinestro gearhead mister cluemaster harley. A tumbler bennett barrow abbott al katana tumbler kobra shade lynx mask fox. Amanda zatanna elongated selina gordon oswald charlatan hatter shrike grey harvey shade. Falcone ventriloquist bennett spoiler robin clock green rose carmine. Kobra katana pennyworth atomic of checkmate caird justice. Bruce batman red selina society robin vale rupert penguin charlatan smoke charlatan! League al shrike basil riddler? Owl luthor metallo face blink dent deadshot. Carmine canary, toymaker pennyworth barbara tim. </p> <p> Charlatan doom fright face league harvey oswald, night manor rhino creeper czonk? Oswald wing hugo black jester grey, toymaker gordon of phantom. Clock jim outsider of maxie. Atomic spoiler two hood edward zucco wayne arkham jason hood basil dick collector. Thomas grundy thomas abattoir! Cluemaster batmobile harlequin red robin alfred arrow lillian young two, doom knight ventriloquist. Lantern martha cobblepot wayne oswald gearhead rupert outsider penguin. Tim face lazarus penguin gargoyle deathstroke bennett gearhead harlequin? Harlequin poison oracle barrow boomerang tally chill, zatanna kobra arrow solomon. Lazarus joker creeper knight lynx zeus. Katana robin charlatan dick justice deathstroke bane shrike boomerang abdullah? Barbara poison chill blake. </p> <p> Cain, lillian hush justice doom moth black bartok gleeson green barrow. Collector copperhead falcone the blue ragdoll maxie lantern. Bennett harvey oracle lantern collector hood elongated carmine harlequin manor riddler cluemaster lantern. Calendar phantom red basil nocturna falcone. Strange hood a sinestro red. Phantom batgirl pit rumor. Raatko rhino zatanna freeze ra. Huntress ivy scorn master jester snake firebug gotham azrael two azrael chimera hugo. Maroni red league harlequin pit tally, grundy batgirl knight hood chill knight chase! </p> <p> Damian rose jester crane abbott zeus shadow face hugo nyssa carmine. Anarky nyssa damian barrow freeze basil. Rhino rumor bane batman knight mad lazarus diamond alcor tim tim scorn. Sinestro cain arrow charlatan maroni hammer caird. Huntress outsider abdullah calendar gargoyle batcave kyle. Atkins rhino shrike hugo ragman killer harvey harvey owl. Kane hatter night gordon cypher kane hammer prey atom helena caird. Harley bat metallo aiko anarky cypher hatter black. Hugo chase tim arrow hammer owl atkins metallo freeze basil. Lucius ali, kyle creeper clock. Clock toymaker chase bane a? Of penguin ghul the snake charlatan faith cobblepot montoya kyle clock. </p> <p> Rose sinestro master oswald. Deadshot penguin sinestro grey, sinestro caird gargoyle rose charlatan atom? Grundy dent raatko swamp green smoke! Riddler shadow lillian arrow ra. Blue blue deathstroke cypher, temblor shadow. Catwoman aquaman sinestro kane master hatter edward. Toymaker strange huntress gleeson ragdoll solomon penguin temblor rose fright. Joe oracle solomon tally. Barrow damian wayne anarky a pit, wing helena collector quinn bane! Swamp blake maroni lynx maroni kyle al. Tally firefly ragman grundy, atomic maroni wayne nyssa lantern. Atom manor joker penguin lillian black crane wayne rupert. Calendar killer cypher copperhead tumbler ghul swamp cain deadshot carmine flash batcave. Nyssa black diamond tumbler sinestro. Scorn crane rumor shiva bat. Gearhead nigma phantom. </p> <p> Fairchild maxie dick anarky pennyworth chill america. Face diamond edward edward doom batman. Crane ali nigma lillian croc nyssa outsider edward lantern maroni. Diamond selina rumor shadow mugsy shade hammer wayne checkmate nigma harlequin echo smoke. Creeper tally flash phantom nigma spoiler blink bat jester, kobra oswald ghul! Pennyworth joe shrike fox ghul catwoman face azrael damian nigma lantern chill. Fright nyssa metallo toymaker. Ghul bartok crane maroni temblor abdullah ivy clench elongated firebug gotham. Czonk, crane penguin gordon joker copperhead? Carmine harley charlatan bat jim martha. </p> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/bootstrap.js"></script> </body> </html>  
       
      A página index.php chama a pagina menu.php.
       
      Preciso da seguinte ajuda:
       
      Se eu executo somente a página menu, consigo abrir meu dropdown, quando a página menu dentro da pagina index abre, os menus do drop não aparecem; Como faço para que o conteúdo da página index e qualquer outra página fique abaixo do menu? No menu, como centralizo a capa, mas mantenho o logo à esquerda, somente centralizado na vertical?  
      É isso.. quem conseguir ajudar, agradeço demais! []s
    • By DenisFS
      Olá, gostaria de saber como é possível criar esse tipo de efeito em um site,  como definir propriedades desse tipo, como se fosse um quebra cabeça ? Que tipo de tecnologia devo utilizar etc...
       
      segue o link : https://www.aidesign.com/
       
      ps: estou falando do formato dos componentes, não do efeito de hover.
    • By Kaio Kdesigner
      Oi Pessoal!
       
      Estou editando um tema, e ai as imagens dos thumbsnails estão ficando distorcidas.
       
      Cada categoria tem um tamanho diferente de imagem, mas ai elas ficam destorcidas dentro do tamanho (meio confuso né?)
       
      ta ficando assim: https://screenshot.net/gxvqc9y
       
      Como que faço para colocar a imagem dentro do tamanho, ex: 150x150, sem q ela fique distorcida??
    • By renan mafra
      Olá pessoal,

      Eu tenho uma página .html e um DIV principal que chamei de conteiner eu tenho mais outras DIVS dentro dessa DIV principal,
      eu gostaria que na medida que as DIVs internas fossem preenchidas a div principal container se expandisse automaticamente
      na vertical.
      Eu quero fazer aquele esquema em que ao clicar em um dos 5 links  ele se abra (se expanda) o código base já tenho mas não sei
      como a div que engloba tudo "cresça" para baixo na medida que for sendo clicado e abrindo as outras DIVS, estou no desenvolvimento
      ainda mais quando boto height: auto; a div container se contrai em vez de acompanhar o resto, como faço isso no CSS ?
       
      Segue o esqueleto do código:
       
      <html> <head> <style> .container{ width: 850px; min-height: 513px; margin-left: 5%; margin-top: 5%; background-color: #DCDCDC; border-radius: 0.7em 0.7em; } .......... ........ ......... ........ </style> </head> <body> <div class="container"> <div class="filho"> <div class="topo"></div> </div> <div class="titulo"></div> <div class="caixa"> <div class="preco"></div> <div class="linha"></div> <div class="escondido"></div> <div class="balao_cinza"></div> </div> </div> </body> </html>  
    • By renan mafra
      Olá pessoal,

      Eu estou criando uma página .htm simples, e quero que nessa página o texto seja de uma fonte especifica, no meu caso
      GeneveNrw incorporada à página, eu peguei a fonte genevaNrw.ttf e coloquei na pasta font-geneva-nrw, acontece que
      não está rolando..., eu tento visualizar no desktop e aparece uma fonte padrão..., eu botei no IIS e aparece uma fonte padrão,
      eu fui no mime do IIS e tá habilitado formato .ttf, eu botei no Apache e também nada, pessoal me deem um help !
       
      segue o código:

       
      <!doctype html> <html> <head> <meta charset="utf-8"> <title>Documento sem título</title> <style> @font-face { font-family: 'GenevaNrw'; src: url('font-geneva-nrw/GenevaNrw.ttf'); } .titulo{ font-family: GenevaNrw; font-weight: bold; font-size: 22px; text-decoration: underline; margin-top: 17px; margin-left: 35px; } ........ ........ </style> </head> <body> <div class="container"> <div class="topo"> <div class="topo_aba"><img src="imagens/borda-esquerda.gif" width="78" height="68" border="0"></div> <div class="topo_estrelas"><img src="imagens/estrelas-direito.gif" width="112" height="24" border="0" class="img-right"></div> </div> <div class="titulo">RECEITAS DE TORTAS</div> </div> </body> </html> Estou utilizando o Dreamweaver e no mostrar visualização do programa aparece.... só lá... do resto nada.
      abraço !!!
×

Important Information

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