Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lord_3

HTML e CSS

Recommended Posts

<img src="C:\Users\Merlin\Documents\projetobeta\_imagens/1.jpg">
<h3>Texto aqui.</h3>

 

 

Não consigo começar o texto ao lado da foto para que ele prossiga até vim parar abaixo da foto.
Não sei como fazer isso em css, sou novato ainda.
Poderiam me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

A forma mais simples de fazer isso é assim:

<!-- no css -->

.img-texto{
    float:left;
    margin: 0 15px 15px 0;
}

<!-- no html -->

<img src="https://www.visgraf.impa.br/Courses/ip00/proj/Deconv/exemplos/palhaco.jpg" class="img-texto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fringilla dignissim sapien, sed elementum lorem lobortis eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim egestas nunc, a lobortis tortor faucibus eu. Phasellus urna velit, dignissim at vehicula in, luctus non diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque libero purus, viverra eget libero porttitor, accumsan cursus lacus. Phasellus commodo mi in nisi euismod, a interdum dolor ornare. Sed finibus elit ac quam vehicula consequat. Cras in dui ipsum. Proin venenatis enim eget quam congue faucibus. Donec ut rutrum felis.</p>

<p>Ut in purus in tortor hendrerit rutrum sed sit amet libero. Mauris ultrices aliquam pulvinar. Praesent non justo nulla. Vivamus fringilla lectus id leo laoreet, vitae vestibulum quam vestibulum. Proin nec mi auctor, feugiat ante a, ornare nibh. Nullam fringilla non augue at elementum. Mauris neque leo, ultrices non urna quis, condimentum tincidunt sem. Nunc id nibh euismod orci varius volutpat. Ut quam diam, ornare non mi id, volutpat lobortis sem. Duis interdum nulla in quam pellentesque facilisis. Proin facilisis, ante non varius porta, massa risus sollicitudin velit, ac vulputate ante quam vel mi. Morbi vel semper arcu. Fusce ut gravida justo. Curabitur convallis, urna eu varius vulputate, orci velit placerat quam, in blandit diam augue sit amet tortor.
</p>

Aqui tem o resultado desse código https://jsfiddle.net/dougtop/5y26br9o/

 

Abraços.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Lord_3
      Duvida Nª1
      Eu estou usando assim:
               <img class="direita" src="C:\Users\Merlin\Documents\lady\_imagens/2.jpg" align="right"/>
              <img src="C:\Users\Merlin\Documents\lady\_imagens/5.jpg" align="center"/>
              <img src="C:\Users\Merlin\Documents\lady\_imagens/3.jpg" align="left"/>
       
      Mas as imagens estão muito afastadas uma das outras e queria saber como posso dar um espaçamento menor entre elas.


      Duvida Nª2
      Esta assim:
      <img src="C:\Users\Merlin\Documents\lady\_imagens/1.jpg">
          <h3>O texto aqui dentro.</h3>
      Eu queria colocar o texto de forma que ele começasse ao lado da foto e depois passasse para baixo da foto e finalizasse a mesma abaixo da foto.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.