1

Estou usando uma tabela para alinhar imagens e um texto. Porém, quando a resolução é baixa, ele fica muito desagradável e eu queria colocar o texto embaixo,em resoluções baixas. Como fazer isso, sendo que estão dentro de uma tabela?

Código:

<table>
    <tr>
    </tr>
    <tr style="display: inline;">
        <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;width:150px"></td>
        <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
        <td><h3 style="padding-left: 2%">Stone Of The Month</h3></td>
        <tr style="display: inline;">
            <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none;box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
            <td><img src="img/image1.jpg" id ="imagem1" class="img-thumbnail small" alt="Cinque Terre" style="max-width: none; box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);float: left;display: block;" width="150px"></td>
            <td><h5 style="padding-left: 2%">Lorem ipsum dolor sit amet, sint mutat maiorum usu an, vim te alia movet labores, in oratio civibus nam. Audire adipisci eos at, ad dicant deserunt deterruisset vim. An nec melius verterem, vel ex electram honestatis. Eam erant primis id, usu ex fugit elitr.</h5></td>
        </tr>
    </tr>
</table>

Imagem:https://i.sstatic.net/i91Vu.png

Como faria para por embaixo,mesmo tando em uma tabela ?

3
  • 1
    Você não precisa usar tabela para fazer isso, pode usar uma div e colocar alguma classe responsiva do bootstrap como por exemplo col-sm Commented 1/03/2016 às 16:24
  • 1
    você está usando bootstrap? Você está usando as classes que este dispõem ao seu favor?.. Já conhece isso? layoutit.com ......
    – Ale
    Commented 1/03/2016 às 16:37
  • Olá,obrigado Gabriel Rodrigues e Alexandre C. Caus.Irei tentar utilizar os 2 métodos
    – saidmrn
    Commented 1/03/2016 às 17:27

1 Resposta 1

1
<div class="col-md-12">
  <div class="col-md-3">
    <img src="imagem.jpg">
    <br/>
    <span>exemplo de texto</span>
  </div>
  <div class="col-md-3">
    <img src="outraImagem.jpg">
    <br/>
    <span>exemplo de texto</span>
  </div>
</div>

http://www.bootply.com/NEMECLieqQ

Um exemplo curto sobre um alinhamento sobre um texto abaixo da imagem. Pode ser montada de várias maneiras.

Se o Texto chega a ser muito grande, recomendo que faça isto.

<div class="col-md-12">
      <div class="col-md-2 col-sm-1">
        <img src="imagem.jpg">
        <br>
        <span class="">exemplo de texto grande independente do número de caracteres, sempre permanecerá alinhado a imagem</span>
      </div>
      <div class="col-md-2 col-sm-1">
        <img src="outraImagem.jpg">
        <br>
        <span>exemplo de texto grande independente do número de caracteres, sempre permanecerá alinhado a imagem</span>
      </div>
    </div>

http://www.bootply.com/M0WYutA1Mx

Utilizando o col-sm, ele "limita" o conteúdo posto a direita e também afasta outro conteúdo colocado a direita.

3
  • Olá,como eu faço pra impedir que o texto fique assim: i.imgur.com/X3QMpRE.png Quando for este caso,por todo o texto embaixo ? Obrigado !
    – saidmrn
    Commented 1/03/2016 às 18:43
  • Vou melhorar a resposta, para te auxiliar @saidmrn...Verifique se corresponde a sua dúvida... Commented 1/03/2016 às 19:05
  • Muito Obrigado @Daniel Nicodemos !
    – saidmrn
    Commented 1/03/2016 às 19:16

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 .