Jump to content
Ewfc2005

Alinhar imagens lado a lado

Recommended Posts

Não sei se entendi muito bem o que tu quer, mas eu fiz assim olha:

        <img src="img/img1.png" 
             style="max-width: 20%;">
        <img src="img/img2.png"
             style="max-width: 20%;">
        <img src="img/img3.png"
              style="max-width: 20%;">

 

Como ficou:

ft1.thumb.png.e354b36085c2d48df32219ae004fe308.png

 

Em um dispositivo mobile (resolução de moto g6 play)

ft2.png.b01bf034babc4694c9cef64e1a074be3.png

 

É isso que você quer?

Se for, é só você trabalhar com % no lugar de px.

 

OBS: Se mesmo assim a linha quebrar, você pode tentar isso aqui:

 

        <img src="img/img1.png" 
             style="width: 30%; height: 30%;">
        <img src="img/img2.png"
             style="width: 30%; height: 30%;">
        <img src="img/img3.png"
             style="width: 30%; height: 30%;">

 

Resultado:

1836789439_ft3.thumb.png.b73f1485516fd171680779305bfc52a0.png

 

 

Em um dispositivo mobile:

700983015_ft4.png.7706d8021f894b5f898c124702030aa3.png

Share this post


Link to post
Share on other sites

Obrigado, Agora eu gostaria de saber como eu faço para posicionar elas no meio da pagina sem tirar a responsividade do site

Share this post


Link to post
Share on other sites
    <div align="center">

        <img src="img/img1.png" 
            style="max-width: 20%;">
        <img src="img/img2.png"
            style="max-width: 20%;">
        <img src="img/img3.png"
            style="max-width: 20%;">

    </div>

Vê se isso te serve

Share this post


Link to post
Share on other sites

funciounou mais ou menos, porque por exemplo, eu nao consigo deixar ela com uma distancia entre a outra e elas acabam

nao ficando centralizadas.

Share this post


Link to post
Share on other sites

Entendi!

Pra isso tu vai ter que usar margin-left ou margin-right.

 

Exemplo CSS:

    <style>
        .img1{
        margin-left: 0%;
        }
        .img2{
        margin-left: 8%;
        }
        .img3{
        margin-left: 8%;
        }
    </style>

Exemplo HTML:

    <div align="center">
        
        <img class="img1" src="img/img1.png" 
            style="max-width: 20%;">
        <img class="img2" src="img/img2.png"
            style="max-width: 20%;">
        <img class="img3" src="img/img3.png"
            style="max-width: 20%;">

    </div>

 

Resultado:

ft1.thumb.png.80bf02a625636757625168054147f420.png

 

 

No caso, tu vai ter que alternar entre os valores do margin-left, e se for preciso, usar margin-right.

Share this post


Link to post
Share on other sites
31 minutos atrás, Ewfc2005 disse:

Funcionou Direitinho! Obrigado, porem eu nao consigo colocar outras 3 imagens abaixo alinhadas na mesma coluna

 

<br> para quebrar a linha e faz a mesma coisa com os códigos.

 

Exemplo:

 

    <div align="center">
        
        <img class="img1" src="img/img1.png" 
            style="max-width: 20%;">
        <img class="img2" src="img/img2.png"
            style="max-width: 20%;">
        <img class="img3" src="img/img3.png"
            style="max-width: 20%;">

		<br>
	
        <img class="img4" src="img/img4.png" 
            style="max-width: 20%;">
        <img class="img5" src="img/img5.png"
            style="max-width: 20%;">
        <img class="img6" src="img/img6.png"
            style="max-width: 20%;">
    </div>
    <style>
        .img1{
        margin-left: 0%;
        }
        .img2{
        margin-left: 8%;
        }
        .img3{
        margin-left: 8%;
        }
		.img4{
        margin-left: 0%;
        }
        .img5{
        margin-left: 8%;
        }
        .img6{
        margin-left: 8%;
        }
    </style>

 

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 iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

×

Important Information

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