html如何从竖的布局变成横的布局,CSS3 RSS源横向和竖向列表布局

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300);

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

* {

padding: 0;

margin: 0; }

html, body {

height: 100%;

font-family: 'Yanone Kaffeesatz', sans-serif;

letter-spacing: 0.1em; }

.header {

position: fixed;

background: #fff;

right: 0;

left: 0;

height: 50px;

z-index: 10;

top: 0;

line-height: 53px; }

.header-title, .btn {

margin: 0px 10px;

text-transform: uppercase; }

.btn {

border: 1px solid #000;

padding: 2px 6px;

font-size: 14px;

top: -2px;

position: relative;

cursor: pointer; }

.btn:hover, .btn.active {

color: #fff;

background: #000; }

.posts {

height: 100%;

width: 100%;

top: 50px;

position: absolute;

white-space: nowrap; }

.overlay {

position: fixed;

z-index: 2;

width: 100%;

height: 100%;

background: #000;

opacity: 0;

pointer-events: none;

-webkit-transition: transform 0.3s;

-moz-transition: transform 0.3s;

transition: transform 0.3s; }

.posts:hover .overlay {

opacity: 0.3; }

.post {

position: relative;

z-index: 0;

color: #fff;

min-height: 100px; }

.post .more {

letter-spacing: 0;

margin-top: 20px;

text-transform: uppercase;

font-size: 12px;

opacity: 0;

-webkit-transform: translateY(20px);

-moz-transform: translateY(20px);

-ms-transform: translateY(20px);

-o-transform: translateY(20px);

transform: translateY(20px);

-webkit-transition: all 0.3s;

-moz-transition: all 0.3s;

transition: all 0.3s; }

.post:hover {

z-index: 5; }

.post:hover .more {

opacity: 1;

-webkit-transform: translateY(0px);

-moz-transform: translateY(0px);

-ms-transform: translateY(0px);

-o-transform: translateY(0px);

transform: translateY(0px); }

.horizontal .post {

width: 100%; }

.horizontal .content {

padding: 20px 10px; }

.vertical .post {

width: 220px;

height: 100%;

display: inline-block;

vertical-align: top; }

.vertical .content {

padding: 20px;

white-space: normal; }

.post .content {

z-index: 2;

position: relative;

font-family: 'Open Sans', sans-serif;

pointer-events: none; }

.bg {

width: 100%;

height: 100%;

position: absolute;

z-index: 0;

top: 0;

left: 0;

-webkit-transition: transform 0.3s;

-moz-transition: transform 0.3s;

transition: transform 0.3s; }

h3 {

font-weight: normal;

font-size: 20px;

font-family: 'Yanone Kaffeesatz', sans-serif; }

.author {

font-size: 12px; }

.post-link {

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

right: 0;

bottom: 0; }

.horizontal .post:hover .bg {

-webkit-transform: scaleY(1.3);

-moz-transform: scaleY(1.3);

-ms-transform: scaleY(1.3);

-o-transform: scaleY(1.3);

transform: scaleY(1.3); }

.vertical .post:hover .bg {

-webkit-transform: scaleX(1.2);

-moz-transform: scaleX(1.2);

-ms-transform: scaleX(1.2);

-o-transform: scaleX(1.2);

transform: scaleX(1.2); }