私は12divの配列が必要です。 HTML、CSSを使うことができます。私はコードと配置を表示します

Question

私は12 divsの具体的な配置が必要です。私は努力していますが、できません。私はコードと配置を表示します。あなたが私を助けてくださいできれば。

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

UPDATE

上記のコードは、これはそれがすることを意味し、100％応答し、どのブラウザでもすばらしいr画面サイズ

Answer 2

それは最もパフォーマンスではないのですが、このパズルの場合には、私は絶対位置を使用することをお勧めします。それははるかに簡単です。要素を浮動させることも可能ですが、この場合はかなり難しいでしょう。

位置を使用してパズルを解く：絶対;

HTMLは：同じ

CSSまま：

.gallery { 
    /* Use the gallery div as a container for the absolute children. The children's top/left/bottom/right will be based on this div */ 
    position: relative; 
    /* Let's assume each box in the raster is 10x10px */ 
    width: 140px; 
    height: 80px; 
} 
.gallery > div { 
    position: absolute; 
} 
.one { 
    /* Since every child-div is absolute, you can use top/left/bottom/right */ 
    top: 0; 
    left: 0; 
    height: 20px; 
    width: 30px; 
} 
.two { 
    top: 0; 
    left: 30px; 
    height: 20px; 
    width: 20px; 
} 
/* add height/width/top/left for all other children */ 

をそれだけでなく％値を使用することが可能であるが、私は10pxのが説明しやすいと思いました。ここで