实现原理
自适应正方型的原理是利用padding-bottom:100%来实现的，为什么padding-bottom:100%等于容器宽度而不是高度呢，因为padding和margin的百分比都是按照文档方向算的，正常的文档方式是左右，自然也就是宽度了。
垂直居中利用了flex的justify-content，具体可以搜索相关资料。
优点如下
1、随着页面宽度自适应，一直保持正方形。
2、头像和标题自动左右垂直居中。
实现方法
友情链接我以前写过好几篇文章了，原理大家都很熟悉了，直接给出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 (!emptyempty($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 (!emptyempty($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;
- }
