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/

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

<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来动态创建红色的DIVs。

我不想使用红色DIVs的原因并不是因为我不喜欢它们，它更多的是一个理论问题来扩展我对于解决这种布局的观点。

预先谢谢你

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 {
    position: absolute;
}

给您的div一个类或一个想法，以区别他们通过：

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

如果你喜欢的话，你也可以和第一个孩子一起工作。

然后，继续根据您的布局来定位每个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;
}