0

Bom é o seguinte, tenho o seguinte código, o que pretendo é colocar as divs que estão dentro da div com id="goncalo" ao lado umas das outras em forma de linha reta, ou seja, quero que fique alinhadas em forma duma "reta".

<div id="goncalo">
<div class="preview-wrapper" style="background-image: url('1.png'); background-repeat: no-repeat; width:50px; height:100px; background-size:100%;" data-id="24294275">
</div>
<div class="preview-wrapper" style="background-image: url('2.png'); background-repeat: no-repeat; width:100px; height:100px; background-size:100%;">
</div>


            </div>
4
  • Mas tem que ficar equalizada a altura das duas imagens ? 30/01/2017 às 0:04
  • Exato. Tudo igual ao lado uma da outra.
    – Gonçalo
    30/01/2017 às 0:04
  • Adiciona no CSS a seguinte linha: #goncalo > div { float:left;} 30/01/2017 às 0:10
  • Não resulta! Já tentei
    – Gonçalo
    30/01/2017 às 0:16

1 Resposta 1

1

Olá. Atualmente esta coisa do posicionamento em CSS está bastante facilitado.

.goncalo {
   width: 100%; //o tamanho que quiseres
   text-align: justify;
   display: flex;
   justify-content: space-between;
 }
.preview-wrapper {
   width: 100px;
   .
   .
   .
}

And so on! Reparei que tens widths diferentes para as .preview-wrapper!

Bom, a questão aqui é utilizares as FLEXBOXES

Abraço e bom trabalho.

5
  • As divs estão alinhadas na mesma linha, mas estão mesmo longe uma da outra, vou deixar abaixo um print.
    – Gonçalo
    30/01/2017 às 0:15
  • prnt.sc/e20ul1
    – Gonçalo
    30/01/2017 às 0:17
  • Já entendi, foi do 100% existe alguma forma de calcular automaticamente consoante o tamanho das imagens? das divs colocadas?
    – Gonçalo
    30/01/2017 às 0:22
  • O tamanho das imagens varia? Então usa auto para a width da .preview-wrapper... Mas seria mais fácil se mostrasses o layout do que pretendes. Pela imagem que colocaste é difícil, para mim pelo menos, orientar-te.
    – Horacsio
    30/01/2017 às 0:45
  • Já consegui o que pretendia, mas tive que colocar a largura da div goncalo a 0.
    – Gonçalo
    30/01/2017 às 0:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .