Texto ao lado de imagem

[monteirof7 1]

Galera, criei uma <li> e dentro dela coloco uma <img> e um texto. Porém quando esse texto precisa continuar abaixo ele vai pra baixo da imagem e continua dali. Queria que ele continuasse bem embaixo de onde o texto começou. Pergunta bem básica de css, mas parece que faltei essas aulas, como faço isso?

 

Valeu

[__Matheus__ 0]

Se eu entendi, você pode fazer isso com style="display: inline-table".

[monteirof7 1]

Vou postar meu código, deve ficar mais facil pra entender.

<ul class="list-group" style="margin-top:50px;">
                        	<li class="list-group-item"><img src="../../img/icons/gift79.png" width="35" height="35" alt="" />Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem</li>
                            <li class="list-group-item"><img src="../../img/icons/hands11.png" width="35" height="35" alt=""/>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem</li>
</ul>

Quando termina o espaço da <li> e o texto precisa continuar na linha de baixo, ele fica abaxio da imagem.

 

Valeuu

[__Matheus__ 0]

Dei uma "arrumada" no código:

<ul class="list-group" style="margin-top:50px; width:80px; height:auto;">
                        	<li class="list-group-item"><img src="../../img/icons/gift79.png" width="35" height="35" alt="" />Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem</li>
                            <li class="list-group-item"><img src="../../img/icons/hands11.png" width="35" height="35" alt=""/>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem</li>

Aí você só precisa definir o width:80px; para o que você quer!

[monteirof7 1]

Aqui vai uma imagem que achei que é EXATAMENTE como está o meu caso (acho que até o uso do bootstrap)

 

 

Percebam que são duas <li> e em cada uma tem uma imagem e um texto (nesse caso tem um texto em negrito tb). Porém na primeira <li> a palavra "espaço' vai para baixo da imagem ao inves de ir para baixo de 'doações', o que é exatamente o meu caso! Quero que o texto continue abaixo do texto.

 

meu código:

<ul class="list-group" style="margin-top:50px;">
                        	<li class="list-group-item"><img src="../../img/icons/gift79.png" width="35" height="35" alt="" />Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem</li>
                            <li class="list-group-item"><img src="../../img/icons/hands11.png" width="35" height="35" alt=""/>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem</li>
</ul>

Valeu pela ajuda

[__Matheus__ 0]

Agora eu entendi. E acho que ainda tem como fazer com css.

 

Tenta colocar um LI no texto e resolver com padding!

[monteirof7 1]

Nao deu certo, mas obg pela ajuda!

 

Se alguem tiver outra sugestao, agradeço desde ja!

[William Bruno 1501]

Dá float: left na imagem e overflow: hidden no texto.

 

Nesse caso, vc precisa de uma tag, texto jogado é texto jogado, sem semântica.

 

<li class="list-group-item"><img src="../../img/icons/hands11.png" width="35" height="35" alt=""/><p>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem</p></li>

Assim vc dá um overflow: hidden pra tag <p> e não acontece isso ai de "cair" para baixo da imagem.