Разделитель между столбцами сетки

Question

как я могу добавить разделитель между столбцами сетки. Я пытаюсь добавить границу, и это всегда нарушает макет. Пожалуйста, посмотрите на прилагаемую картинку для ясного понимания.

EDIT

посмотрите здесь

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 и задать ему границу ...

Answer 3

как говорит gtamil, это добавит ширину границы к каждому столбцу.Итак, вы можете видеть следующие варианты: 1) делать так, как он говорит 2) удалять 1px из каждого столбца, который имеет границу 1px 3) использовать фоновые изображения, а не фактические границы

Вариант 3 обычно является моим предпочтением, поскольку обычноЯ хочу, чтобы разделители были одинаковой высоты.Я хотел бы иметь фоновое изображение на контейнере для переноса (не div столбца), который повторяется по вертикали.Если вы хотите использовать этот метод, но разделители не имеют одинаковой высоты, вы можете вместо этого добавить одно и то же изображение в столбцы.