0
上の灰色のボックスで2番目の列（緑色のボックス）を列に並べることは可能ですか？上の列の上に列を並べる
私はあなたが空白を削除することができますが、私はそれらにパディングをしたいと思います。
多分calc関数のある方法ですか？
https://jsfiddle.net/g76qzwy2/
* {
box-sizing: border-box;
}
body {
color: #fff;
}
/* Top left & right col */
.left-col {
background: grey;
float: left;
width: 66.6%;
padding: 1rem;
}
.right-col {
background: orange;
float: left;
width: 33.3%;
padding: 1rem;
}
/* Col row */
.col-row {
margin-left: -1rem;
}
/* Bottom cols */
.col {
float: left;
width: 33.3%;
}
.col-a,
.col-b,
.col-c {
padding-left: 1rem;
}
/* Col content */
.col-a-content {
background: red;
padding: 1rem;
}
.col-b-content {
background: green;
padding: 1rem;
}
.col-c-content {
background: blue;
padding: 1rem;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="left-col">
<span>test content</span>
</div>
<div class="right-col">
<span>test content</span>
</div>
<div class="col-row">
<div class="col col-a">
<div class="col-a-content">
<span>col a</span>
</div>
</div>
<div class="col col-b">
<div class="col-b-content">
<span>col a</span>
</div>
</div>
<div class="col col-c">
<div class="col-c-content">
<span>col a</span>
</div>
</div>
</div>
</body>
</html>