2
我的挑戰是嘗試使列表網格視圖看起來像pinterest類似的佈局。 我已經對它做了一點小小的代碼......但這還不夠。 下面的行不適合彼此。用於pinterest佈局樣式的CSS代碼
#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
同時，我已經通過網絡做搜索，只發現了下面的代碼...但我不知道如何執行它。有人可以在這裏給我提問嗎像在哪裏插入什麼？！
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;
}
我想pintrest可能使用JavaScript。像jQuery的石工插件可能是有用的。 –