2

Estou tentando deixar três imagens por linha em uma página, defini isso no corpo da página:

        <div class="produtos-ponta">
      <div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/amsterdam.jpg"/>
        <div class="content">
          <h4 class="name">Descricao</h4>              
        </div>
      </div>
      <div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/arezzo.jpg"/>
        <div class="content">
          <h4 class="name">Descricao</h4>              
        </div>
      </div>
      <div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/belmont.jpg"  />
        <div class="content">
          <h4 class="name">Descricao</h4>              
        </div>
      </div>                    
    </div>

E isso no meu css:

.produtos-conteudo-ponta {
    position:relative;
    text-align: center;
    margin-bottom: 20px;
    height: 320px;
    float:left;
}

.produtos-conteudo-ponta .photo {   
    max-width:320px;
    max-height:196px;
    width: auto;
    height: auto;   
}

.produtos-ponta {
    position:relative;
}

.one-fourth-ponta {
    width: 20.5%;   
    max-width: 320px;
}

Mas as imagens quebram a linha, gostaria de deixa-las em somente uma.

A página para visualização é essa: Página

2 Respostas 2

2

Basta adicionar display: inline-block; à class: produtos-conteudo-ponta

.produtos-conteudo-ponta {
    display: inline-block;
}

Atualização

Para adicionar um espaçamento maior entre as imagem podes utilizar a propriedade - margin. Como por exemplo margin-left:10px; ou margin-right:10px;. Ou mesmo adicionar ambos de maneira a que elas fiquem mais ou menos com uma margem igual para os dois lados.
No entanto eu abordaria isto de maneira diferente.

Como temos 3 divs em linha (inline), eu iria fazer o seguinte calculo:

100 a dividir por 3 que dá = 33.333333
Este calculo será - 100% o tamanho da div parent a dividir por 3 divs child

então o tamanho da largura para a class produtos-conteudo-ponta será de 33.333333% fazendo-as assim iguais do mesmo tamanho, e responsivas à div parente.
(isto pensando já na possibilidade de esta poder ser redimensionada mais tarde em ecrãs de pequenas resoluções)

.produtos-conteudo-ponta {
    display: inline-block;
    width: 33.333333%;
}

Em seguida iria modificar a hierarquia do código de marcação HTML da seguinte maneira:

<div class="produtos-conteudo-ponta one-fourth-ponta">
    <div class="content">
        <img class="photo" src="/imagens-ponta/amsterdam.jpg"/>
        <h4 class="name">Descricao</h4>              
    </div>
</div>

No código acima modificamos a imagem para ser incluída dentro da class .content pela seguinte razão:

Em vez de estarmos a mudar class por class e adicionar atributos a cada uma delas, como por exemplo - margens, espaçamentos etc vezes e vezes sem conta, em vez disso iremos apenas aplicar os estilos à class .content:

.content {
    display: block;     /* Poderíamos adicionar também width:100%; mas ao adicionarmos este atributo o width:100%; já está a ser aplicado */
    max-width: 200px;   /* Isto especifica que nós não queremos que a div cresça mais do que os 200px */
    margin: 0 auto;     /* Isto centraliza a div ao centro por igual - para ambos, a margem esquerda e a margem direita. É nesessário o display:block; acima já adicionado para que isto funcione correctamente */
}
.photo {width: 100%;}   /* E por fim a imagem ficará a 100% da div "content". que neste caso será o máximo de 200px */

Eis um exemplo online disto no jsFiddle ► http://jsfiddle.net/hwjvnzgm

Arraste a janela de exibição do jsFiddle para ver o seu comportamento em várias resoluções.
Para aumentar ou diminuir o espaçamento entre elas basta ir brincando com o valor max-width:200px;

5
  • 1
    Nem lembrei do display: inline-block; +1
    – Ricardo
    Commented 17/07/2015 às 20:53
  • 1
    Obrigado pela ajuda, ficou muito bom. Commented 17/07/2015 às 21:02
  • Como posso deixar um espaçamento maior entre as imagens? Commented 17/07/2015 às 21:14
  • Atualizei a minha resposta @adventistapr , dê lá uma olhada :)
    – Chun
    Commented 18/07/2015 às 4:50
  • 1
    Olá @Chun obrigado pela atualização da resposta, prática e eficiente e me ajudou muito. Commented 18/07/2015 às 22:43
2

Faça o teste com este css:

.produtos-conteudo-ponta{
    float:left
}

Ele faz com que todos os elementos de classe .produtos-conteudo-ponta flutuem a esquerda, assim os Bloquinhos ficaram lado a lado.

Como dito acima o efeito também pode ser alcançado com display: inline-block;

Fiddle: Link para ver online

1
  • Obrigado @ricardo, foi de grande ajuda a sua dica, Commented 17/07/2015 às 21:01

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 .