效果如图,也可点击查看具体效果。
优点如下
- 随着页面宽度自适应,一直保持正方形。
- 头像和标题自动左右垂直居中。
实现原理
自适应正方型的原理是利用padding-bottom:100%
来实现的,为什么padding-bottom:100%
等于容器宽度而不是高度呢,因为padding
和margin
的百分比都是按照文档方向算的,正常的文档方式是左右,自然也就是宽度了。
垂直居中利用了flex的justify-content
,具体可以搜索相关资料。
实现方法
友情链接我以前写过好几篇文章了,原理大家都很熟悉了,直接给出CSS和PHP代码。
CSS代码
.catalog-title { font-size: 24px; color: #000; font-weight: 700 } .catalog-share { font-size: 14px; color: rgba(0,0,0,.44); margin-bottom: 20px } .userItems { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 50px } .userItem { width: 25%; box-sizing: border-box; margin-bottom: 20px; padding-left: 10px; padding-right: 10px } .userItem--inner { border: 1px solid rgba(0,0,0,.05); box-shadow: 0 1px 4px rgba(0,0,0,.04); border-radius: 3px; position: relative; padding-bottom: 100%; height: 0 } .userItem-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 10px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .userItem-content .avatar { border-radius: 100% } .userItem-name { margin-top: 8px; text-align: center } @media (max-width:900px) { .userItem { width: 33.33333% } } @media (max-width:600px) { .userItem { width: 50% } }
PHP代码
function get_the_link_items($id = null){ $bookmarks = get_bookmarks('orderby=date&category=' . $id); $output = ''; if (!empty($bookmarks)) { $output .= '<div class="catalog-share">' . count($bookmarks) . ' items in collection</div><div class="userItems">'; foreach ($bookmarks as $bookmark) { $output .= '<div class="userItem"><div class="userItem--inner"><div class="userItem-content">'. get_avatar($bookmark->link_notes,64) . ' <div class="userItem-name"><a class="link link--primary" href="' . $bookmark->link_url . '" target="_blank" >' . $bookmark->link_name . '</a></div></div></div></div>'; } $output .= '</div>'; } return $output; } function get_link_items(){ $linkcats = get_terms('link_category'); if (!empty($linkcats)) { foreach ($linkcats as $linkcat) { $result .= ' <h3 class="catalog-title">' . $linkcat->name . '</h3><div class="catalog-description">' . $linkcat->description . '</div> '; $result .= get_the_link_items($linkcat->term_id); } } else { $result = get_the_link_items(); } return $result; }
具体操作方法可以参考下面的文章,本文就不再重复了。
嗯
学习了
嗯,立马试试,收走了
研究一下,一点代码都不会
又是满满的干货,赞大发!
名称过长的话自适应会溢出变形……
费心了,可惜我是个废人
不折腾,不铁血,甭管好不好看,这种精神,大家都支持的。
怎么玩啊?