html - 我需要一些 12 div 的排列。我可以使用 HTML、CSS。我会展示代码和安排

Question

我需要 12 个 div 的特定排列。我正在尝试，但我做不到。我将展示我们的代码和安排。如果可以，请帮助我。

12个div的排列方式:

我给了他们宽度和高度的百分比，但它不起作用。 我会展示代码。

我的代码:

.gallery {
  width: 100%;
  height: 800px;
  padding: 0px;
  margin: 0px;
  overflow: auto;
}

.gallery div {
  border: 1px solid black;
  margin: 0px !important;
  float: left;
}

.one {
  width: 21.42%;
  height: 25% ;
  display: inline-block;
}

.two {
  width: 14.28%;
  height: 25%;
  display: inline-block;
}

.tree {
  width: 64.26%;
  height: 37.5%;
  display: inline-block;
}

.fore {
  width: 14.28%;
  height: 50%;
  display: inline-block;
}

.five {
  width: 14.28%;
  height: 75%;
  display: inline-block;
}

.six {
  width: 7.14%;
  height: 37.5%;
  display: inline-block;
}

.seven {
  width: 21.42%;
  height: 25%;
  display: inline-block;
}

.eight {
  width: 14.28%;
  height: 65.5%;
  display: inline-block;
}

.nine {
  width: 28.56%;
  height: 37.5%;
  display: inline-block;
}

.ten {
  width: 14.28%;
  height: 25%;
  display: inline-block;
}

.eleven {
  width: 28.56%;
  height: 37.5%;
  display: inline-block;
}

.twelve {
  width: 28.56%;
  height: 25%;
  display: inline-block;
}

<div class="container gallery">
  <div class="one"></div>
  <div class="two"></div>
  <div class="tree"></div>
  <div class="fore"></div>
  <div class="five"></div>
  <div class="six"></div>
  <div class="seven"></div>
  <div class="eight"></div>
  <div class="nine"></div>
  <div class="ten"></div>
  <div class="eleven"></div>
  <div class="twelve"></div>
</div>

Answer 1

这是一个工作示例 jsfiddle

HTML:

<div class="container gallery">
  <div class="one"></div>
  <div class="two"></div>
  <div class="tree"></div>
  <div class="fore"></div>
  <div class="five"></div>
  <div class="six"></div>
  <div class="seven"></div>
  <div class="eight"></div>
  <div class="nine"></div>
  <div class="ten"></div>
  <div class="eleven"></div>
  <div class="twelve"></div>
</div>

CSS:

html, body, .container
{
    height: 100%; 
    min-height: 100%;
    margin: 0
}

.one {
    float: left;
    width: calc((100% * 3) / 14);
    height: calc((100% * 2) / 8);
    background-color: red;
}

.two{
    float: left;
    width: calc((100% * 2) / 14);
    height: calc((100% * 2) / 8);
    background-color: green;
}

.tree{
    float: right;
    width: calc((100% * 9) / 14);
    height: calc((100% * 3) / 8);
    background-color: blue;
}

.fore{
    float: left;
    width: calc((100% * 2) / 14);
    height: calc((100% * 4) / 8);
    background-color: blue;
}

.five{
    float: left;
    width: calc((100% * 2) / 14);
    height: calc((100% * 2) / 8);
    background-color: #DDDDDD;
    position: absolute;
    left: 0;
    bottom: 0
}

.six{
    float: left;
    width: calc((100% * 2) / 14);
    height: calc((100% * 6) / 8);
    background-color: yellow;
}

.seven{
    float: left;
    width: calc((100% * 1) / 14);
    height: calc((100% * 3) / 8);
    background-color: brown;
}

.eight{
    float: left;
    width: calc((100% * 3) / 14);
    height: calc((100% * 2) / 8);
    background-color: cyan;
}

.nine{
    float: left;
    width: calc((100% * 4) / 14);
    height: calc((100% * 3) / 8);
    background-color: magenta;
    position: absolute;
    bottom: 0;
    left: calc((100% * 4) / 14);
}

.ten{
    float: left;
    width: calc((100% * 2) / 14);
    height: calc((100% * 5) / 8);
    background-color: purple;
}

.ten{
    float: left;
    width: calc((100% * 2) / 14);
    height: calc((100% * 5) / 8);
    background-color: purple;
}

.eleven{
    float: left;
    width: calc((100% * 4) / 14);
    height: calc((100% * 3) / 8);
    background-color: gray;
}

.twelve{
    float: left;
    width: calc((100% * 4) / 14);
    height: calc((100% * 2) / 8);
    background-color: teal;
}

更新

上面的代码是 100% 响应的，这意味着它在任何浏览器或屏幕尺寸下看起来都很棒