0
私は最近、クイズにあったテンプレートを見つけて、画像上のテンプレートを再現しようとしました。それについてのトリッキーな部分は、クイズが既に閉じていると私は私の答えを審査のために提出することはできません。私はまだ私のテンプレートの正しさについて興味があるので、私はそれを正しく再現すれば、あなたに尋ねたい、HTMLの達人です。指定されたテンプレートを作成する正しい方法
ありがとうございます！
IMAGE：
LINK：Codepan
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body, html {
height: 100%;
}
div, header {
height: 100%;
min-height: 50px;
float: left;
border: 2px solid black;
box-sizing: border-box;
}
header {
width: 100%;
height: 25%;
text-align: center;
}
.wrapper {
height: 75%;
width: 100%;
}
.wrapper > .first-column, .wrapper > .second-column {
height: 100%;
width: 50%;
}
.wrapper > .first-column > div {
width: 100%;
}
.wrapper > .first-column > .first-row {
height: calc(100%/3);
}
.wrapper > .first-column > .second-row {
height: calc(100% * 2/3);
}
.wrapper > .first-column > .second-row > div {
height: 100%;
width: 50%;
}
.wrapper > .first-column > .second-row > .second-column > div{
height: 50%;
width: 100%;
}
.wrapper > .first-column > .second-row > .second-column > div{
height: 50%;
width: 100%;
}
.wrapper > .second-column > div {
height: 100%;
width: 50%;
}
.wrapper > .second-column > .second-column > div{
width: 100%;
height: calc(100%/3);
}
</style>
<body>
<header>
Test Table
</header>
<div class="wrapper">
<div class="first-column">
<div class="first-row">
</div>
<div class="second-row">
<div class="first-column"></div>
<div class="second-column">
<div class="first-row"></div>
<div class="second-row"></div>
</div>
</div>
</div>
<div class="second-column">
<div class="first-column"></div>
<div class="second-column">
<div class="first-row"></div>
<div class="second-row"></div>
<div class="third-row"></div>
</div>
</div>
</div>
</body>
</html>