网格列之间的分隔符(Separator Between grid columns)

网格列之间的分隔符(Separator Between grid columns)

如何在网格列之间添加分隔符。 我尝试添加边框，它总是打破布局。 请仔细阅读附图，以便清楚了解。

编辑

看看这里

http://burnfatweightlossblog.com/aiu/junaid/testhtml/

码

<div class="container_12"> <div id="footer"> <div class="alpha grid_3 dabox"> </div> <!-- Box 1--> <div class="grid_3 dabox"> </div> <!-- Box 2--> <div class="grid_3 dabox"> </div> <!-- Box 3--> <div class="omega grid_3 dabox"> </div> <!-- Box 4--> </div> <!-- footer--> </div>

how can i add separator between grid columns. I try adding border and it always broke the layout. Please have a look at the attached picture for clear understanding.

EDIT

have a look it here

http://burnfatweightlossblog.com/aiu/junaid/testhtml/

code

<div class="container_12"> <div id="footer"> <div class="alpha grid_3 dabox"> </div> <!-- Box 1--> <div class="grid_3 dabox"> </div> <!-- Box 2--> <div class="grid_3 dabox"> </div> <!-- Box 3--> <div class="omega grid_3 dabox"> </div> <!-- Box 4--> </div> <!-- footer--> </div>

最满意答案

添加边框会增加额外的1px，因此它会破坏布局，而不是向网格列添加边框，尝试在其中添加div并为其添加边框...

Adding border would add extra 1px , so it breaks the layout, instead of adding border to grid column, try adding a div inside of it and give border to it ...