Ir para conteúdo
Fórum Script Brasil
  • 0

[AJUDA] Posicionar 3 div lado a lada horizontal e imagem na vertical


emilyoly

Pergunta

Boa noite pessoal tudo bem.

Estou com o seguinte problema, q na verdade dei um jeitinho rs'. não estou conseguindo posicionar 3 divis lado a lado, para resolver isso tive q colocar float left em todas as 3 divs ai resolveu mas sei q essa não é a maneira correta.

E na terceira div possuo um conjunto de links q são img , e elas não ficam posicionadas no centro vertical da div.

Segue o codigo html:

<article class="post">
			<div class="category">
				<a href="#">Categoria do Post</a>
			</div>
			<!--Category-->
			<div class="agrupapost">
		 	<div class="ptitulo"><h1>Titulo do post</h1></div>
		 	<!--Titulo do post-->

		 	<div class="infoautor">
				Por: <span>Daniele</span> | <span class="cinzamedio">Data: 06/05/15</span>
				<hr />	
			</div>
			<!--Info autor-->

			<div class="contentpost">
				<div class="thumbpost">
					<img src="images/imgpostt.jpg" height="281" width="440" alt="">
				</div>
				<!--Tumb Post-->

			<div class="pfooter">
				<div class="pcomment">
					<a href="#"><span>12</span> Comentarios</a>
				</div>
				<div class="leiamais">
					<a href="#">Continue Lendo &gt</a>
				</div>
				<div class="psocial">
					<a href="#"><img src="images/social/facebook.png" height="20" width="20" alt="Facebook"></a>
					<a href="#"><img src="images/social/pinterest.png" height="20" width="21" alt="Pinterest"></a>
					<a href="#"><img src="images/social/twitter.png" height="20" width="20" alt="Twitter"></a>
					<a href="#"><img src="images/social/rss.png" height="20" width="20" alt="RSS"></a>
				</div>
				<!--Leia Mais-->	
			</div>
			<!--Footer Post-->
			</div>
			<!--Content Post-->
			</div>
			<!--Agrupa Post-->
</article>
<!--Article Post-->

E aqui o CSS:

/*---------------POST BLOG--------------------------*/
.post{width: 620px;float: left;}
.agrupapost{width: 100%;border: 1px solid #CFD1D9;margin-bottom: 20px;padding-bottom: 10px;}
/* Titulo do Post */
.ptitulo{margin-top: 25px;text-align: center;}
/* Informações do Post */
.infoautor{text-align: center;font-size: 12px;}
.infoautor hr{width: 500px;margin:auto;margin-top: 5px;}
/* Imagem do Post */
.thumbpost{margin-top: 15px;text-align: center;}
/* Descrição / Conteudo Post */
.txpost{margin-top: 15px;margin-left: 20px;color: #232323;font: 14px;}

/*Footer Post*/
.pfooter{
	width: 100%;height: 35px;
	 text-align: center;
	 display: inline-block;line-height: 35px;margin-top: 20px;}
/*Comentarios*/
.pcomment{font-size: 12px;float: left;width: 150px;}
/* Continue Lendo */
.leiamais{margin-left: 85px;width:150px;font-size: 12px;float: left;}
.leiamais a{color: #FF5B00;}
.leiamais a:hover{color: #FF5B00; font: 16px;text-shadow:1px 0px 2px gray;}

/*Social*/
.psocial{margin-left: 85px;width: 150px;float: left;}
.psocial a {}
/*Category*/
.category{position:relative;top: 15px;width: 150px;height: 30px;line-height: 30px; text-align: center;background: #FF5B00;margin:auto;}
.category a{color: #fff;}

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...