HTML模板

Question

我正在尝试构建以下HTML模板：

如果我使用红色容器1-4，这很容易，给出了这样的语法：

<div id="red-1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div id="red-2">
  <div>5</div>
  <div>6</div>
</div>
<div id="red-3">
  <div>7</div>
</div>
<div id="red-4">
  <div>8</div>
  <div>9</div>
</div>

  

https://jsfiddle.net/rbpep3ot/

但我想要一个解决方案，我不必使用红色DIV，给我这样的语法：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

  

https://jsfiddle.net/nhh4wdLr/1/

这是否可能，因为整个事物的高度是固定的，我现在无法想到解决方案。我不想使用JS来动态创建红色DIV。

我不想使用红色DIV的原因不是因为我不喜欢它们，而是扩大我对解决这种布局的看法的理论问题。

提前多多感谢=）

Answer 1

检查这个小提琴：

<div id="container">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div5">5</div>
    <div class="div7">7</div>
    <div class="div8">8</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div6">6</div>
    <div class="div9">9</div>
</div>

#container > div{
    position: absolute;
    border-style: solid; 
    text-align: center;
}

https://jsfiddle.net/jg0ufmx4/2/

当然，你必须使用绝对定位，希望有更好的方法

Answer 2

看看这个：

http://jsfiddle.net/wu0vbm1m/1/

当然你需要调整div的高度和宽度，以便将它们用作真正的布局，这个小提琴只是为了让你知道如何去做。

基本上，绝对定位每个div：

div {
    position: absolute;
}

让你的div成为一个阶级或想法，通过以下方式区分它们：

<div id="one">1</div>

如果您愿意，也可以与n-child一起工作。

然后，根据您的布局继续定位每个div：

#two {
    width: 100px;
    height: 50px;
    top: 0;
    left: 50px;
}

Answer 3

您也可以使用 CSS网格布局来实现这一点，尽管浏览器的支持很糟糕。

看看但请确保您使用的是 IE10 + ： https://jsfiddle.net/nhh4wdLr/2/

body {
    display: -ms-grid;
    -ms-grid-columns: auto auto auto auto auto auto;
    -ms-grid-rows: 35px 30px 30px;
}
.div-1 {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}
.div-2 {
    -ms-grid-column-span: 2;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
}
.div-3 {
    -ms-grid-column-span: 2;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
}
.div-4 {
    -ms-grid-column: 3;
    -ms-grid-row: 2;
}
.div-5 {
    -ms-grid-row-span: 2;
    -ms-grid-column: 4;
    -ms-grid-row: 1;
}
.div-6 {
    -ms-grid-column: 4;
    -ms-grid-row: 3;
}
.div-7 {
    -ms-grid-row-span: 3;
    -ms-grid-column: 5;
    -ms-grid-row: 1;
}
.div-8 {
    -ms-grid-column: 6;
    -ms-grid-row: 1;
}
.div-9 {
    -ms-grid-column: 6;
    -ms-grid-row: 2;
}