網格列之間的分隔符

如何在網格列之間添加分隔符。我嘗試添加邊框，它總是打破布局。請看清楚附圖，以便理解。網格列之間的分隔符

enter image description here

編輯

看看在這裏

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>

來源

2011-10-11 Rao

你試過填充？有些像這樣.col> {> padding-right：10px; > padding-left：50px; >} 會更容易，如果我們一些代碼，表或任何它是.. – rmagnum2002

回答這裏 http://stackoverflow.com/questions/8802074/how-to-add-a-vertical-line-between-兩個960克箱 – nikmauro

添加邊框會增加額外的1px的，所以它打破的，而不是添加邊框格列布局，嘗試加入的這裏面一個div，並給邊境它...

來源

2011-10-11 06:03:46 gtamil

讓我試試這個，讓我們希望這一個修復它：D – Rao

好主意，只是用它在我的網站上，工作很好 – Alex

爲gtamil說，這將增加每列的邊框寬度。所以上你的選擇，因爲我看到他們是： 1）做的，因爲他說 2）從具有像素邊框 3）使用背景圖片，而不是實際的邊界

選3每列刪除1px的通常是因爲我的偏好通常我希望分隔線的高度相等。我會在包裝容器（不是列div）上重複垂直的背景圖像。如果你想使用這種方法，但沒有分隔符等於高度，那麼你可以將相同的圖像添加到列。

來源

2011-10-11 07:32:48 lnrbob

現在我添加了backgorund圖像併發送審查，但我真的希望它與CSS，謝謝你的詳細回覆 – Rao

周圍發生電網格內內容的包裝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 */ 
}

來源

2012-06-22 01:57:28 Robert

這個概念對我很好，除了我不得不刪除填充線的CSS ...我需要的只是邊緣（填充混亂了）。 – Mark

網格列之間的分隔符

回答

相關問題