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 Emilio Saymon
      tenho um site que precisa que assim que eu aperte um botão ele verifiquei se a variavel sala for sala 1 ele abre no modal da sala1 se não abre no modal da sala2. Dei uma pesquisada e vi que da pra fazer com a função onclik(), mas não tenho noção como fazer. Aqui vai o código.
      botão <td><a href="#" class="btn btn-primary" data-toggle="modal" data-target="#modalLoginForm">XXX</a></td> <!-- sala 1 --> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <h6>Sala 1</h6> <input type="password" class="form-control validate" name="senha"> </div> </div> <button type="submit" class="btn btn-primary" name="enviar">Entrar</button> </form> </div> </div> </div> </div> </div> <!-- sala 2 --> <div class="modal fade" id="modalLoginForm2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header text-center"> <h4 class="modal-title w-100 font-weight-bold">Senha</h4> <button type="btn-primary" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body mx-3"> <div class="md-form mb-4"> <form method="POST" action="valida.php"> <p>Sala 2</p> <input type="password" class="form-control validate" name="senha2"> </div> </div> <div class="modal-footer d-flex justify-content-center"> <button type="submit" class="btn btn-primary" name="enviar1">Entrar</button> </form> </div> </div> </div> </div>  
    • By danicarla
      Bom dia pessoal,

      Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual
      Meu codigo está assim:
      <style type="text/css"> a.ChamadaNoticias:link{text-decoration:none;} a.ChamadaNoticias:visited{text-decoration:none;} a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;} .tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;} .textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;} </style> <a href="#" class="ChamadaNoticias"> <div class="tituloA">Titulo da noticia</div> <div class="textoB">Aqui vai uma breve descrição da noticia</div> </a> Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?
    • By joazinDev
      Estou tentando calcular duas horas e as vezes precisso que ela saia negativa tbm
      Exemplo:
      07:33 - 07:48 = -00:15
      Como faço isso utilizando php ?
    • By ThosuZ
      Olá, pessoal. Tudo bom? Estou com um problema aqui. Criei uns links em um site pra levarem pra uma galeria, são imagens que estão lado a lado, cada uma com a imagem principal de cada galeria. O problema é: eu criei elas como background de li's de uma ul. Coloquei um <span> dentro da tag <li> pra poder aparecer o nome da galeria quando passar o mouse por cima. Observem o código:
       
      HTML:
       
      <ul id="artefotos">                 <a href="lorena.html" target="_self" class="glink"><li id="ft01"><span>Lorena Frazzão</span></li></a>                 <a href="vivian.html" target="_self" class="glink"><li id="ft02"><span>Vivian Nadine</span></li></a>                 <a href="paula.html" target="_self" class="glink"><li id="ft03"><span>Paula Bernardes</span></li></a>                 <a href="anaclara.html" target="_self" class="glink"><li id="ft04"><span>Ana Clara</span></li></a>                 <a href="marcus.html" target="_self" class="glink"><li id="ft05"><span>Marcus Visasi</span></li></a>                 <a href="davi.html" target="_self" class="glink"><li id="ft06"><span>Davi Serrano</span></li></a>                 <a href="rafaejr.html" target="_self" class="glink"><li id="ft07"><span>Rafaela & Jr</span></li></a>             </ul>  
      CSS:
       
      ul#artefotos li span {     font-size: 15pt;     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);     line-height: 1120px;     padding: 10px;     opacity: 0;     transition: 0.5s; }   ul#artefotos li:hover span {     opacity: 1;     background-color: rgba(0, 0, 0, 0.5); }   a.glink {     color: #fff; }   ul#artefotos {     width: 1470px;     margin: 0 auto;     margin-top: -20px;     padding: 25px;     overflow: hidden;     list-style: none; }   ul#artefotos li {     float: left;     width: 200px;     height: 600px;     margin: 5px;     background-color: #363636;     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); }   ul#artefotos li#ft01 {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px; }   ul#artefotos li#ft01:hover {     background: url('../_images/_essays/_lorena/IMG_2651.jpg') no-repeat;     background-position: 50% 50%;     background-size: 400px;     filter: opacity(25%); }  
      Porém, na última seção do CSS, eu coloquei um :hover pra quando passar o mouse, o fundo ficar menos opaco e a tipografia mais legível. Mas a tipografia também ficou menos opaca, já tentei colocar esse :hover no span como background: rgba(0,0,0,0.5); mas também não deu certo, porque ele fica apenas um retângulo em volta dele.
       
      Alguém sabe como resolver pra deixar toda a imagem menos opaca e a tipografia normal quando passar o mouse?
       
      Valeu!

    • By giltonuni
      Olá amigos estou com esse códido que funciona assim perfeito, porem gostaria nessa linha em vermelho caso o login não fosse encontrado no dns1 procura-se no DN2, dn3 e dn4

      Agradeceria muito a ajuda

      <?php
      $XCStreamHostUrl = 'dns1"
      $XClogoLinkval = 'assets/img/logo.png';
      $XCcopyrighttextval = '';
      $XCcontactUslinkval = '';
      $XChelpLinkval = '';
      $XClicenseIsval = 'Web-384884f8a2';
      $XClocalKey = '';
      $XCsitetitleval = 'Teste - WebPlayer';
      ?> 
       
×

Important Information

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