創建圖像

Question

我試圖設計類似下面的使用HTML CSS &圖像/分隔的佈局網格佈局。

這裏是我的嘗試：

HTML

<div id="container"> 
    <div class="bigBox"> 
    </div> 
<div class="box 1"></div> 
<div class="box 2"></div> 
<div class="box 3"></div> 
<div class="box 4"></div> 
</div> 

CSS

#container { 
width: 100%; 
height: 415px; 
} 

.bigBox { 
float: left; 
width: 400px; 
height: 290px; 
} 

.box { 
width: 244px; 
height: 200px; 
float: right; 
margin: 0; 
padding: 0; 
} 

.1 { background: url("http://i.imgur.com/zYerntp.png"); background-color: red;} 

然而，很明顯日e代碼不工作如何我期望它，我已經嘗試把容器內的相對定位與內部的元素作爲絕對，但它沒有工作。

有什麼建議嗎？

Answer 1

雖然表將是最結構化，像@ user1925801的答案，我會說這是比較容易只是使用類和CSS樣式。所有你需要做的是浮動所有的箱子到右邊，並添加某些類別的他們的風格，就像這樣：

HTML

<div class="big orange"></div> 
<div class="small blue"></div> 
<div class="small red"></div> 
<div class="small red"></div> 

CSS

div { 
    display: inline-block; 
    float: left; 
} 

/* sizes */ 
.big { 
    width: 50%; 
    height: 400px; 
} 
.small { 
    width: 25%; 
    height: 200px; 
} 

/* colors */ 
.orange { 
    background-color: orange; 
} 
.blue { 
    background-color: blue; 
} 
.red { 
    background-color: red; 
} 

此輸出：

查看工作示例at JSFiddle.net。

Answer 2

可以實現這一佈局，CSS flexbox。

HTML

<div id="container-outer"> 
    <div class="bigBox"></div> 
    <div id="container-inner"> 
     <div class="box a"></div> 
     <div class="box b"></div> 
     <div class="box c"></div> 
     <div class="box d"></div> 
    </div> 
</div> 

CSS

#container-outer { 
    display: flex; 
    height: 300px; 
} 

.bigBox { 
    width: 400px; 
    height: 300px; 
    background-color: orangered; 
} 

#container-inner { 
    display: flex; 
    flex-wrap: wrap; 
} 

.box { 
    width: 244px; 
    height: 150px; 
} 

.a, .d { background-color: skyblue; } 
.b, .c { background-color: red; } 

DEMO

請注意，Flexbox受所有主流瀏覽器支持，except IE 8 & 9。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前綴，請在左側面板中發佈您的CSS：Autoprefixer。