css自适应宽度正方形布局九宫格

作者: Jeff_Tsui | 来源:发表于2017-08-16 17:20 被阅读0次

*{

margin:0; padding:0;

}

ul{

text-decoration:none;

list-style-type:none;

}

.video_list>li{

float:left;

width:32%;

text-align:center;

border:1px solid#ccc;

padding-top:31%;

margin-left:1%;

margin-top:1%;

position:relative;

}

.video_list>li>div{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background-color:#09BE07;

}

.video_list>li>div>span{

display:inline-block;

margin-top:50%;

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

transform:translateY(-50%);

}

updating...
CSS 1、三栏布局问题（左右固定宽度中间自适应） flex grid float + margin 2、CSS...
css自适应宽度正方形布局九宫格
*{ margin:0; padding:0; } ul{ text-decoration:none; list-...
Css布局练习
双列布局，某一列自适应宽度。若我们想做下图所示的Css布局： Css:body{ width:500px; ma...
两栏&三栏&双飞翼&圣杯
两栏自适应布局(左边固定，右边自适应) 利用CSS中的calc()方法来动态设定宽度双float布局缺点：要清...
布局
两栏自适应布局(左边固定，右边自适应) 利用CSS中的calc()方法来动态设定宽度双float布局缺点：要清...
CSS布局&居中&媒体查询
1.CSS布局实现一个两栏布局，右侧固定宽度200px，左侧自适应宽度浮动元素 + 普通元素margin 实现...
css布局
1.CSS布局实现一个两栏布局，右侧固定宽度200px，左侧自适应宽度浮动元素 + 普通元素margin 实现...
特殊布局方法
关于圣杯布局和双飞翼布局：CSS布局之--淘宝双飞翼布局双飞翼布局介绍CSS控制自适应宽度两三栏布局圣杯布局的实现...
vw 单位 android 4.4 下的一个小bug
CSS3 vw 单位 100vw = 100% 视窗宽度100vh = 100% 视窗高度这样实现自适应正方形(...
CSS真的很麻烦，把CSS语法学会了，提升你的编码能力还是绰绰有
css3画热咖啡 css自适应布局方案一、百分比布局宽度百分比，高度px布局二、rem布局①自定义rem尺寸 ...