瀑布流效果"/>
css3实现瀑布流效果
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS3瀑布流布局</title><style type="text/css">body {background-color: #f1f1f1;}.container {width: 60%;margin: 0 auto;font-size: 14px;color: #333;}.column-box {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;-moz-column-gap: 1em;-webkit-column-gap: 1em;column-gap: 1em;}.column-item {padding: 0.2em;-moz-page-break-inside: avoid; /*避免在元素内部插入分页符*/-webkit-column-break-inside: avoid;break-inside: avoid;background: white;-moz-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24);}.column-item img.bigimg {width: 100%;padding-bottom: 1em;border-bottom: 1px solid #ccc;}.verticalAlign {vertical-align: middle;}.user {padding-bottom: 0.5em; }.user p {font-size: 14px;color: #666;padding: 0;line-height: 8px;}.user p:first-child {padding-top: 8px;}.user p span {font-size: 12px;color: #999;}.column-item-2 {width: 20%;float: left;}.column-item-2 img {width: 100%;border-radius: 50%;}.column-item-2 img:after {content: '更多推荐
css3实现瀑布流效果
发布评论