Html 为图像创建网格布局

我正在尝试使用HTML和CSS设计如下所示的图像/div布局

以下是我的尝试：

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>

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

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

然而，很明显代码并没有按照我预期的方式工作，我尝试将容器放在相对位置中，其中的元素是绝对的，但它没有工作

---

有什么建议吗？

虽然表格是最结构化的，就像@user1925801的回答一样，但我想说，仅仅使用类和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>

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

<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实现此布局

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>

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

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

请注意，所有主要浏览器都支持flexbox。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请在此处的左面板中发布CSS:。

-刚刚添加了

webkit

前缀