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

Взгляните на это:

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

Конечно, вы должны регулировать высоту и ширину для дивы, чтобы использовать их в качестве реального макета , эта скрипка только для того, чтобы дать вам представление о том, как это сделать.

В принципе, позиция каждого Div абсолютно:

div { 
    position: absolute; 
} 

Дайте DIVS либо класс или идею, чтобы отличить их от:

<div id="one">1</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

Вы, n это также можно использовать с помощью CSS Grid Layout, хотя поддержка браузеров ничтожна.

Взгляните, но убедитесь, что вы используете 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; 
}