Databases
StackOverflow2013
Postsdbo
POCSS code for pinterest layout style
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS code for pinterest layout style
    text
    copied!<p>My challenge is trying to make the listing grid view looking like pinterest similar layout. I've already made a little code with it... but it's not enough. the rows below don't fit each other.</p> <pre><code>#content .category_grid_view li.featured { position:relative; -moz-border-radius:3px; -webkit-border-radius:3px; } #content .category_grid_view li .featured_img { width:69px; height:72px; position:absolute; left:15px; top:0px; text-indent:-9009px; } #content .category_grid_view li p.timing { margin:0; padding:0; } #content .category_grid_view li p.timing span { color:#000; } #content .category_grid_view li .widget_main_title { height:25px;overflow:hidden; clear:left;} #content .category_grid_view li a.post_img {height:auto;width:100%;padding:1%;} #content .category_grid_view li a.post_img img{height:100%;max-height:100%;width:auto;} #page .category_grid_view { width: auto; padding-left:0px; } #content .category_grid_view li a.post_img { height:auto; max-width:100%; overflow:hidden; } #content .category_grid_view li a.post_img img { margin:0 auto; display:block; height:auto; } #content .category_grid_view { margin:-10 0 20px -15px; padding:0; width:650px; clear:both; } #content .category_grid_view li { background: none repeat scroll 0 0 transparent; float: left; list-style: none outside none; margin: -10 0 20px; padding: 0 0 0 15px; position: relative; width: 200px; } #content .category_grid_view li.hr { display: none; } #content { float: left; overflow: hidden; padding-left: 5px; width: 640px; } #content .category_grid_view li a.post_img { display: block; margin-bottom: 0; padding: 0; background: none repeat scroll 0 0 #FFFFFF; border: 0 solid #E2DFDF; box-shadow: 0 0 0 #DDDDDD; height: auto; width: 100%; overflow: hidden; } #content .category_grid_view li a.post_img img { height: auto; overflow: hidden; width: 100%; } #content .category_grid_view li.featured a.post_img { border: 0 solid #B1D7E0; } #content .category_grid_view li .widget_main_title { padding-top: 7px; clear: left; height: 25px; overflow: hidden; background: none repeat scroll 0 0 #EBEBEB; } #content .category_grid_view li .rating { background: none repeat scroll 0 0 #EBEBEB; display: block; margin: 0px 0; padding-bottom: 7px; padding-top: 7px; } #content .category_grid_view li p.review { background: none repeat scroll 0 0 #EBEBEB; border-bottom: 10px solid #EBEBEB; border-top: 1px solid #EBEBEB; color: #EBEBEB; margin-bottom: 20px; padding: 5px 0; } </code></pre> <p>This is how it looks like:</p> <p><a href="http://images.findout-macau.com/2013/09/grid-view-rows.png" rel="nofollow">http://images.findout-macau.com/2013/09/grid-view-rows.png</a></p> <p>Meanwhile, i've made search through the web and only found out the following code... yet i don't know how to implement it. Can someone tip me here? Like where tu insert what?!</p> <pre><code>html, body{ margin:auto; width:100%; background-color:#e6e6e6; } #wrapper { width: 100%; margin: 10px auto; } #columns { -webkit-column-count: 4; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 4; -moz-column-gap: 10px; -moz-column-fill: auto; column-count: 4; column-gap: 10px; column-fill: auto; } .pin { display: inline-block; background: #FEFEFE; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); margin: 0 2px 15px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 15px; padding-bottom: 5px; background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); opacity: 0.85; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload