近期公司开发需要：所有内容自适应，不得不用到弹性布局，通过我透彻分析，发现弹性布局简直完美的不要不要！
- 如图所示，不要忽略了line-height在百分比的情况下不起作用的问题，
- 此时的垂直居中采用align-items：center；
文章图片
- 锐客网
* {margin:0;
padding:0;
list-style:none;
font-family:"微软雅黑";
}
body {background:#02042b;
}
/*保障机制*/.safeMachine {width:70%;
display:flex;
justify-content:space-between;
}
/*左面保障机制*/.safeMachineLeft {flex:1.09;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.safeMachineLeft div {display:flex;
align-items:center;
justify-content:center;
}
.safeMachineLeft div:nth-child(1) {text-align:center;
height:100%;
width:100%;
background:url(img/safeMachineLeft1.png) no-repeat top left;
color:#FFFFFF;
background-size:100% 95%;
font-size:12px;
}
.safeMachineLeft div:nth-child(2) {height:100%;
width:100%;
background:url(img/safeMachineLeft2.png) no-repeat top left;
color:#FFFFFF;
background-size:100% 95%;
font-size:12px;
}
.safeMachineLeft div:nth-child(3) {height:100%;
width:100%;
background:url(img/safeMachineLeft1.png) no-repeat top left;
color:#FFFFFF;
background-size:100% 95%;
font-size:12px;
}
/*中间保障机制*/.safeMachineCenter {flex:1;
}
.safeMachineCenter div {height:100%;
display:flex;
align-items:center;
justify-content:center;
width:100%;
background:url(img/safeMachineCenter.png) no-repeat top left;
color:#FFFFFF;
background-size:100% 100%;
font-size:12px;
/* vertical-align:middle;
*//* line-height:190%;
*/}
/*右面保障机制*/.safeMachineRight {flex:1.09;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.safeMachineRight div {display:flex;
align-items:center;
justify-content:center;
}
.safeMachineRight div:nth-child(1) {height:100%;
width:100%;
background:url(img/safeMachineRight1.png) no-repeat top left;
color:#FFFFFF;
background-size:100% 95%;
font-size:12px;
}
.safeMachineRight div:nth-child(2) {height:100%;
width:100%;
background:url(img/safeMachineRight2.png) no-repeat top left;
color:#FFFFFF;
background-size:100% 95%;
font-size:12px;
}
.safeMachineRight div:nth-child(3) {height:100%;
width:100%;
background:url(img/safeMachineRight1.png) no-repeat top left;
color:#FFFFFF;
background-size:100% 95%;
font-size:12px;
}
.dutyTable {width:27%;
height:100%;
}
table {border-collapse:collapse;
}
table,td,th {border:1px solid #59a7ff;
color:#FFFFFF;
font-size: 12px;
}
.duty {width:100%;
height:100%;
}
.duty tr:nth-child(1) td {text-align:center;
width:49%;
height:23%;
}
.duty tr:nth-child(2) td {text-align:center;
width:49%;
height:23%;
}
.duty tr:nth-child(3) td {text-align:center;
width:49%;
height:54%;
} 数据通道传输异常
服务器运行故障
网络访问异常应急处理预案系统运行保障
警民通
一体机
值班日期
1月10日
值班领导
值班人员
- 包含图片完整代码 下载链接
