问题描述
我的挑战是试图使列表网格视图看起来像pinterest一样的布局.我已经用它编写了一些代码……但这还不够.下面的行彼此不匹配.
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.
#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;
}
它是这样的:
http://images.findout-macau.com/2013/09/grid-view-rows.png
同时,我已经在网上搜索了,只发现了以下代码...但是我不知道如何实现它.有人可以在这里给我小费吗?像在哪里插入什么?!
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?!
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;
}
推荐答案
您将需要使用某种jQuery插件来帮助弥合您所看到的所有差距.正如 James 所述,砌石是一个非常受欢迎的选择.另一个插件(没有太多选项/功能)是 jQuery Waterfall .两者都有很多示例,可帮助您入门和运行.
You'll need to use a jQuery plugin of some kind to help close all those gaps you're seeing. As James mentioned, masonry is a very popular option. Another plugin (without as many options/features) is jQuery Waterfall. Both have lots of examples to help get you up and running.
这篇关于pinterest布局样式的CSS代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!