网格列之间的分隔符

Question

如何在网格列之间添加分隔符。我尝试添加边框，但它总是破坏布局。请看一下所附的图片，以便清楚地了解。

编辑

看看这里

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>

Answer 1

在网格 div 内的内容周围放置一个包装 div

HTML：

<div class="grid_4">
    <div class="columnDivider">
        contents here
    </div>
</div>

CSS：

.columnDivider {
    border-right: 1px solid #DEDEDE;
    margin-right:-10px; /* size of gutter */
    padding-right:10px; /* size of gutter */
}

Answer 2

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