css - 画布和 div 块未在网格中对齐

Question

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

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

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

控制这些块的 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

只需删除画布元素之间的换行符：

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