创建图像

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。