帆布和DIV塊網格不對齊

Question

在我的網站的側邊欄，我的計劃是在此形成對準帆布和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; 
} 

如何刪除換行符和/或間距爲所需LAYO UT？

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>