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

在此請看：

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

當然，你需要調整高度和寬度的div使用它們作爲一個真正的佈局，這個小提琴只是給你一個想法如何去做。

基本上，位置每個div都絕對：

div { 
    position: absolute; 
} 

給你的div一個類或一個想法，通過對它們進行區分：

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

你也可以與第n個孩子的工作，如果你喜歡那。

然後，進行定位，根據您的佈局每個的div：

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

Answer 2

檢查這個搗鼓出來：

<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 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; 
}