Ir para conteúdo

POWERED BY:

Arquivado

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

Junior souza limeira

Como colocar texto separado ao lado do outro na horizontal em css html

Por , em Desenvolvimento frontend

Recommended Posts

Junior souza limeira    0

Junior souza limeira
Postado

vou testar aqui


Eu gostaria que ficasse assim http://postimg.org/image/lldgnb33p/

 

mas não tô conseguindo

 

o código que usei foi esse

 

 

 

HTML:

 

<div id="a-b-c">

<img src="_imagens/a.jpg" align="left" id="a"/>

<h2>Websites Resposivos</h2>
<h5>Websites responsivos oferecem uma ótima
experiência de vizualização, fácil leitura e
navegação com um mínimo de
redimensionamento para uma ampla gama de
dispositivos (de monitores de computador a
telefones celulares).</h5>



<img src="_imagens/b.jpg" align="center" id="b"/>

<h2>Portal de Conteúdo</h2>
<h5>Um portal é um site na internet que funciona
como centro aglomerado e distribuidor de
conteúdo para uma série de outros sites ou
subsites dentro, e também fora, do domínio
ou subdomínio da empresa gestora do portal.</h5>



<img src="_imagens/c.jpg" align="right" id="c"/>

<h2>Soluções Dinâmicas</h2>
<h5>Sistema para publicação instantânea de
conteúdo em websites. Soluções
personalizadas para cada necessidade.
Publique artigos, comunicados, notícias,
informativos, dicas, crie galerias de fotos e
vídeos e publique com precisão e agilidade.</h5>

</div>

 

 

 

CSS:

 

div#a-b-c p {

display:inline;
}


/* abc */

#a {
float: left;
margin-top: 1px;
margin-left: 30px;
}
#b {
float: left;
margin-top: -8px;
margin-left: 30px;
}
#c {
float: left;
margin-top: -5px;
margin-left: 30px;
}

div#a-b-c h2 {
text-align: left;
margin-left: 30px;
margin-right: 600px;
}

div#a-b-c h5 {
text-align: left;
margin-left: 30px;
margin-right: 600px;
margin-bottom: 40px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

guilomaker    31

guilomaker
Postado

fiz exatamente como queria, mais sue codigo tinha erros de semântica e coisas sem necessidades, e ainda tem! mais agora e com você brother.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <style>
		body {
			width: 100%;
			font-family: Arial;
		}
		
		.box {
			width: 330px;
			height: auto;
			float: left;
		}
		
		div#a-b-c {
			width: 1050px;
			height: auto;
			margin: auto;
		}
		
		div#a-b-c h2 {
		text-align: left;
		display: inline;

		}
		
		div#a-b-c p {
		text-align: left;
		display: block;

		}
		.left {
			margin-left: 20px;
		}

	</style>
</head>
<body>
	<div id="a-b-c">
		
		<div class="box">
		
			<img src="_imagens/a.jpg"/>
			
			<h2>Websites Resposivos</h2>
			<p>Websites responsivos oferecem uma ótima
			experiência de vizualização, fácil leitura e
			navegação com um mínimo de
			redimensionamento para uma ampla gama de
			dispositivos (de monitores de computador a
			telefones celulares).</p>
		
		</div>
	
	
		<div class="box left">
			<img src="_imagens/b.jpg"/>
			
			<h2>Portal de Conteúdo</h2>
			<p>Um portal é um site na internet que funciona
			como centro aglomerado e distribuidor de
			conteúdo para uma série de outros sites ou
			subsites dentro, e também fora, do domínio
			ou subdomínio da empresa gestora do portal.</p>
		</div>
	
		<div class="box left">
			<img src="_imagens/c.jpg"/>
			
			<h2>Soluções Dinâmicas</h2>
			<p>Sistema para publicação instantânea de
			conteúdo em websites. Soluções
			personalizadas para cada necessidade.
			Publique artigos, comunicados, notícias,
			informativos, dicas, crie galerias de fotos e
			vídeos e publique com precisão e agilidade.</p>
		</div>
	</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito