自适应图片九宫格 css,用css编写自适应九宫格(示例代码)

.video_list{

list-style-type: none;

}

.video_list li{

width: 32%;

float: left;

padding-bottom: 32%;

position: relative;

text-align: center;

font-size:35px;

margin-left: 1%;

margin-bottom: 1%;

}

.video_list div{

position: absolute;

background-color:#09BE07;

border:1px solid #ccc;

width: 100%;

height: 100%;

}

.video_list span{

display: inline-block;

margin-top: 50%;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9