Alinhar texto com imagem

30/03/2020

18

HTML CSS

Estou tendo dificuldade para conseguir colocar o texto do lado da imagem, de forma que ao acabar a imagem o texto passe a preencher a página toda inclusive embaixo dela.
Segue o link do arquivo para quem puder me ajudar, obrigado.

Link do arquivo: https://drive.google.com/drive/folders/1tolGQg08f7kYnyY3AePnsOAS79bTTnXe?usp=sharing
Thiago Cunha

Thiago Cunha
Responder

Posts

03/04/2020

Vinnicius Gomes

Estou tendo dificuldade para conseguir colocar o texto do lado da imagem, de forma que ao acabar a imagem o texto passe a preencher a página toda inclusive embaixo dela.
Segue o link do arquivo para quem puder me ajudar, obrigado.

Link do arquivo: https://drive.google.com/drive/folders/1tolGQg08f7kYnyY3AePnsOAS79bTTnXe?usp=sharing


E ai Thiago blz? Cara acho que seu link do drive está errado, não achei nenhum arquivo HTML lá
Responder
Gostei + 0

04/04/2020

Thiago Cunha

Estou tendo dificuldade para conseguir colocar o texto do lado da imagem, de forma que ao acabar a imagem o texto passe a preencher a página toda inclusive embaixo dela.
Segue o link do arquivo para quem puder me ajudar, obrigado.

Link do arquivo: https://drive.google.com/drive/folders/1tolGQg08f7kYnyY3AePnsOAS79bTTnXe?usp=sharing


E ai Thiago blz? Cara acho que seu link do drive está errado, não achei nenhum arquivo HTML lá
Responder
Gostei + 0

04/04/2020

Thiago Cunha


Link do arquivo: https://drive.google.com/drive/folders/1tolGQg08f7kYnyY3AePnsOAS79bTTnXe?usp=sharing


E ai Thiago blz? Cara acho que seu link do drive está errado, não achei nenhum arquivo HTML lá
Responder
Gostei + 0

04/04/2020

Thiago Cunha

E ai Thiago blz? Cara acho que seu link do drive está errado, não achei nenhum arquivo HTML lá


Desculpa da minha confusão Vinícius, segue o link correto:

https://drive.google.com/drive/folders/1AcKWOMiXMOMN5QOd4MKBcPjm8tHzsUDK?usp=sharing

Obrigado pela ajuda.
Responder
Gostei + 0

06/05/2020

Leandro Chiodini

Bom dia Amigo tudo certo?

Dei uma olhada no seu código estava um pouco carregado de <div> tentei deixar da forma com que você solicitou fazendo algumas alterações.
Caso não seja desta forma volte a comentar aqui pra chegarmos em uma solução.

Primeiramente mudei um pouco as divs onde as informações que você gostaria de contornar a imagem estão dispostas. (Caso haja alguma formatação que tenha esquecido você pode colocar nas classes criadas.
Então a mudança no html ficou assim.


<div class="conteudo">
                
                <div class="imagem">
                    <img src="img/desvantagem.png"class="img-responsive" style="width: 300px; margin-top: 20px; align="left">
                </div>
                
                <div class="texto">
                    <p>
                      Uma pesquisa realizada com 1.521 crianças de 6 a 12 anos pela Highlights, uma revista infantil norte-americana, mostrou que 62% das crianças
                      reclamam que os pais estão distraídos demais para ouvi-los.<br> 
                      E a surpresa! - os celulares são os principais responsáveis por isso. Em 28% dos casos,pais e mães estavam tão entretidos com o aparelho que mal prestavam atenção aos filhos.<br> 
                      E não é só: juntos, celulares, TV's, smartphones e tablets foram a causa desse distanciamento entre filhos e pais em 51% dos casos.
                      <br><br>
                        É difícil imaginar a vida sem computadores e smartphones, não é? Ainda mais para nós, brasileiros, que somos um dos povos mais conectados do mundo.<br> <br>
                        De acordo com o relatório "2018 Global Digital", divulgado pela agência We Are Social, em parceria com a HootSuite, passamos em média 9 horas e 14 minutos na internet e
                       3 horas e 39 minutos nas redes sociais. Não há dúvidas de que os aparelhos eletrônicos são úteis no trabalho, facilitam a comunicação e oferecem infinitas
                       opções de lazer. Mas, se usados com exagero, eles podem ser prejudiciais à saúde.<br> <br><br>
                       Veja a seguir alguns problemas desenvolvidos por quem abusa da tecnologia:<br><br>
                        •	Dores nas mãos e no pescoço;<br>
                        •	Alterações na visão<br>
                        •	Transtornos psicológicos
                    </p>
                </div>
                <div class="fonte">
                    <p>Fonte: <a href="https://www.uol.com.br/vivabem/noticias/redacao/2018/07/21/quais-problemas-de-saude-o-uso-excessivo-de-tecnologia-pode-causar.htm?cmpid=copiaecola">
        https://www.uol.com.br/vivabem/noticias/redacao/2018/07/21/quais-problemas-de-saude-o-uso-excessivo-de-tecnologia-pode-causar.htm?cmpid=copiaecola</a></p>
                </div>
      </div>



Trabalhando com uma classe na div de imagem e outra classe na div Texto basta utilizar os float para que os itens flutuem um do lado do outro.
da seguinte forma no codigo Css.


.imagem {
    float: left;
    margin: 0;
   padding: 10px;
}
.texto {
    float: rigth;
    margin: 0;
   padding: 25px;
}


os parâmetros de padding e margin foram utilizados somente para contrabalancear o texto com a imagem ficando corretamente.

Espero ter ajudado qq duvida posta ai.

[]´s
Responder
Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar