html的div盒子怎么弄整齐,使用纯CSS实现等宽高或其它固定比例的DIV盒子

CSS

语言：

CSSSCSS

确定

body {

/* Important part */

background: orange;

font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

color: #222;

}

.box {

display: inline-block;

position: relative;

width: 20%;

margin: 5% 5% 0 0;

float: left;

font-size: 12px;

}

.box:before {

/* Other ratios */

content: "";

display: block;

padding-top: 100%;

}

.ratio2_1:before {

padding-top: 50%;

}

.ratio1_2:before {

padding-top: 200%;

}

.ratio4_3:before {

padding-top: 75%;

}

.ratio16_9:before {

padding-top: 56.25%;

}

.content {

position: absolute;

/* Styling */

top: 0;

left: 0;

bottom: 0;

right: 0;

background: black;

padding: 30px;

text-align: center;

vertical-align: center;

text-transform: uppercase;

color: #fff;

}

.content span {

font-weight: bold;

font-size: 3em;

display: block;

}

header {

padding: 2em;

color: #333;

text-align: center;

}

a {

font-weight: bold;

}