how to use css to display multiple posts in inline-block like google+ -


I am bringing several posts from my database, I would prefer the post to remove the inline block. It is well displayed but it is not right. I want to display it like the Google + post that I find out the problem is when there is no comment in the post on the left, which is not in the right position, it is not right. I use many display methods and it does not work. 

  & lt; Style type = "text / css" & gt; / * Are the holders of this post * / # container {width: 900px; Overflow: Auto; }. Post {width: 400px; Padding: 20px; Display: Inline-block; Margin: 2px 2px; } & Lt; / Style & gt;

I want to display it like a google + post that displays inline, even if the post is longer than other, any suggestions would be appreciated

Google+ separates its content into 3 columns. There is nothing set to display inline, it will look something like this to mimic your markup: 

  and 
 
  # container {display: block; } # Container section {float: left; Width: 33.33%; } # Container section Post {display: block; }

If you want to do this inline fashion (how does Pinterest do the same way), then you have to use javascript (or server side code) to calculate the heights and Properly offset each .posts element and its surrounding element (as I had made last month)


Comments

Post a Comment