html 流动布局,HTML5 响应式网格布局+流动列

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

border: 0;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

background-image: url(http://subtlepatterns.com/patterns/geometry.png);

}

h1 {

font-family: "Lato", sans-serif;

font-weight: 300;

font-size: 4em;

color: #777;

text-align: center;

}

.item {

float: left;

}

.thing {

height: 150px;

width: 100%;

background: #96d6c6;

-moz-box-shadow: 0 0 6px 2px rgba(80, 80, 80, 0.2);

-webkit-box-shadow: 0 0 6px 2px rgba(80, 80, 80, 0.2);

box-shadow: 0 0 6px 2px rgba(80, 80, 80, 0.2);

}

.extra-tall {

height: 400px;

background: #db6e63;

}

.tall {

height: 300px;

background: #a3626d;

}

.medium {

height: 200px;

background: #50a365;

}

.small {

height: 100px;

background: #6290a3;

}

.extra-small {

height: 50px;

background: #a874d5;

}

@media screen and (max-width: 400px) {

.grid-sizer {

width: calc(4/14*100%);

}

.item {

width: calc(14/14*100%);

}

.gutter-sizer {

width: calc(1/14*100%);

}

.packery {

margin: calc(1.0/14*100%) calc(1.0/14*100%) calc(1.0/14*100%) calc(1.0/14*100%);

}

}

@media screen and (min-width: 400px) {

.grid-sizer {

width: calc(4/19*100%);

}

.item {

width: calc(9/19*100%);

}

.gutter-sizer {

width: calc(1/19*100%);

}

.packery {

margin: calc(1.0/19*100%) calc(1.0/19*100%) calc(1.0/19*100%) calc(1.0/19*100%);

}

}

@media screen and (min-width: 800px) {

.grid-sizer {

width: calc(4/29*100%);

}

.item {

width: calc(9/29*100%);

}

.gutter-sizer {

width: calc(1/29*100%);

}

.packery {

margin: calc(1.0/29*100%) calc(1.0/29*100%) calc(1.0/29*100%) calc(1.0/29*100%);

}

}

@media screen and (min-width: 1200px) {

.grid-sizer {

width: calc(4/39*100%);

}

.item {

width: calc(9/39*100%);

}

.gutter-sizer {

width: calc(1/39*100%);

}

.packery {

margin: calc(1.0/39*100%) calc(1.0/39*100%) calc(1.0/39*100% calc(1.0/39*100%));

}

}

@media screen and (min-width: 1600px) {

.grid-sizer {

width: calc(4/49*100%);

}

.item {

width: calc(9/49*100%);

}

.gutter-sizer {

width: calc(1/49*100%);

}

.packery {

margin: calc(1.0/49*100%) calc(1.0/49*100%) calc(1.0/49*100%) calc(1.0/49*100%);

}

}

.packery:after {

content: " ";

display: block;

clear: both;

}