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

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

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>

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

1 个答案: