css - Canvas 和 div block 未在网格中对齐

Question

在我网站的侧边栏上，我的计划是让 canvas 和 div block 以这种形式对齐:

-----------------------------------
|               |                 |
|  Canvas       |     Canvas      |
|_______________|_________________|
|                                 |
|              Div                |
|_________________________________|
|               |                 |
|  Canvas       |     Canvas      |
|_______________|_________________|

但在实际实现中，每个元素后都有一个换行符，如下所示:http://jsfiddle.net/Uy4Jz/1/

此处显示了控制这些 block 的 CSS:

#engineer {
    width: 50%;
    height: 150px;
    background: #060;
    margin: 0;
    padding: 0;
    border: 0;
}

#programmer {
    width: 50%;
    height: 150px;
    background: #006;
    margin: 0;
    padding: 0;
    border: 0;
}

#name {
    width: 100%;
    height: 75px;
    margin: 0;
    padding: 0;
    border: 0;
}

#musician {
    width: 50%;
    height: 150px;
    background: #600;
    margin: 0;
    padding: 0;
    border: 0;
}

#leader {
    width: 50%;
    height: 150px;
    background: #660;
    margin: 0;
    padding: 0;
    border: 0;
}

如何删除所需布局的换行符和/或间距？

Answer 1

只需删除 Canvas 元素之间的换行符:

<div id = "sidebar">
<canvas id = "engineer"></canvas><canvas id = "programmer"></canvas>
<div id = "name">Name Here</div>
<canvas id = "musician"></canvas><canvas id = "leader"></canvas>
</div>