data-V效果分享

近期公司开发需要：所有内容自适应，不得不用到弹性布局，通过我透彻分析，发现弹性布局简直完美的不要不要！

简单粗暴一直是我的写作风格，直接上代码

如图所示，不要忽略了line-height在百分比的情况下不起作用的问题，
此时的垂直居中采用align-items：center；

data-v效果

代码块

<html>

	<head>
		<title></title>
		<meta charset="UTF-8" />
		<style type="text/css">
			* {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%;}

		</style>
	</head>

	<body>
		<div class="" style="margin-top: 50px;width: 497px;height: 106px;display: flex;justify-content: space-between;">
			<!--第一个-->
			<div class="safeMachine">
				<div class="safeMachineLeft">
					<div>数据通道传输异常</div>
					<div>服务器运行故障</div>
					<div>网络访问异常</div>
				</div>
				<div class="safeMachineCenter">
					<div>应急处理预案</div>
				</div>
				<div class="safeMachineRight">                                
					<div>系统运行保障</div>
					<div>警民通</div>
					<div>一体机</div>
				</div>
			</div>
			<!--表格-->
			<div class="dutyTable">
				<table class="duty">
					<tr>
						<td>值班日期</td>
						<td>1月10日</td>
					</tr>
					<tr>
						<td>值班领导</td>
						<td></td>
					</tr>
					<tr>
						<td>值班人员</td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</body>

</html>

包含图片完整代码下载链接

猜你喜欢