Metro的Grid布局解决自适应问题
Metro使用的是IE10内核,-ms-grid是弹性布局,解决排版问题
<!DOCTYPE html>
<html style="height:100%;">
<head>
<title>Forms Controls - Part 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- WinJS references -->
<link rel="stylesheet" id="ui-dark" type="text/css" href="WinJS/css/ui-dark.css" />
<link rel="stylesheet" id="ui-light" type="text/css" href="WinJS/css/ui-light.css"
disabled="true" />
<link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
<!-- Sample references -->
<link rel="stylesheet" type="text/css" href="css/formLayout.css" />
<link rel="stylesheet" type="text/css" href="css/program.css" />
<style>
body {margin:0;height:100%;}
#wrapper {
width:100%;
height:100%;
display:-ms-grid;
-ms-grid-columns:1fr;
-ms-grid-rows:200px 1fr 200px;
border:2px solid blue;
}
#header {
-ms-grid-row:1;
background:black;
}
#body {
-ms-grid-row:2;
}
#slider {
width:100%;
height:200px;
border:1px solid black;
display:-ms-grid;
-ms-grid-columns:200px 1fr 200px;
-ms-grid-rows:1fr;
-ms-grid-row:3;
}
#slider-head {
-ms-grid-column:1;
background:black;
-ms-grid-layer:2;
}
#slider-center {
-ms-grid-column:2;
background:green;
}
#slider-tail {
-ms-grid-column:3;
-ms-grid-layer:2;
background:black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="slider">
<div id="slider-head">head</div>
<div id="slider-center">center</div>
<div id="slider-tail">tail</div>
</div>
</div>
</body>
</html> 相关推荐
csstpeixun 2020-08-07
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18