为图像创建网格布局

Question

我正在尝试使用HTML＆amp; amp设计像下面这样的图像/ 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>

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

然而，显然代码没有按照我预期的方式工作，我已经尝试将容器放在内部相对定位的内部作为绝对但是它不起作用。

有什么建议吗？

Answer 1

您可以使用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

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。

Answer 2

尽管表格结构最为统一，比如在@ 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。