Jump to content
Fórum Script Brasil
  • 0

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


emilyoly
 Share

Question

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 to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      150.1k
    • Total Posts
      647.1k
×
×
  • Create New...