这个盒子的瓷砖布局可以用纯CSS安排吗？

Question

有没有办法用纯CSS创建这种灵活的布局？

到目前为止，我的实验都没有成功:(宽度和高度应该灵活！

Answer 1

你可以使用绝对定位的div和高度和宽度的百分比。

＆＃13;

＆＃13;

body {
  padding: 0;
  margin: 0;
}
.container {
  overflow: auto;
}
.box {
  background: #000;
  display: block;
}
.one {
  position: absolute;
  height: 40%;
  width: 57.5%;
  left: 0;
  top: 0;
}
.two {
  position: absolute;
  height: 25%;
  width: 40%;
  right: 0;
  top: 0;
}
.three {
  position: absolute;
  height: 55%;
  width: 35%;
  left: 0%;
  bottom: 0;
}
.four {
  position: absolute;
  height: 25%;
  width: 20%;
  left: 37.5%;
  top: 45%;
}
.five {
  position: absolute;
  height: 40%;
  width: 40%;
  right: 0;
  top: 30%;
}
.six {
  position: absolute;
  height: 25%;
  width: 62.5%;
  right: 0;
  bottom: 0;
}

＆＃13;

<div class="container">
  <div class="one box"></div>
  <div class="two box"></div>
  <div class="three box"></div>
  <div class="four box"></div>
  <div class="five box"></div>
  <div class="six box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

<div class="container" style="position: relative;">
  <div class="sidebar" style="background-color: red; height: 214px; width: 214px; position: relative;margin-right: 76px;right: -1px;padding-right: 0px;"></div>
  <div class="content" style="background-color: blue; height: 100px; width: 120px; position: relative;top: -214px;left: 223px;"></div>
  <div class="subscript" style="background-color: green; height: 198px; width: 121px; position: relative;top: -195px;left: 222px;"></div>
  <div class="sidebar" style="background-color: black; height: 227px; width: 100px;position: relative;top: -287px;"></div>
  <div class="content" style="background-color: #434343; height: 100px; width: 105px; position: relative;top: -514px;left: 107px;"></div>
  <div class="subscript" style="background-color: #462312; height: 109px; width: 231px; position: relative;top: -499px;left: 108px;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;