960網格邊界混亂。

我希望這是簡單的東西，只是我的經驗與CSS。我只是試圖添加一個像素邊框到一組嵌套的div。960網格邊界混亂。

<div class="grid_11 suffix_1"> 
    <div class="borderupdown"> 
    <div class="grid_1 alpha"> 
     <p>RNK</p> 
    </div> 
    <div class="grid_1"> 
     <p>IQ</p> 
    </div> 
    <div class="grid_8 omega"> 
     <div class="grid_8 alpha"> 
     <p>title<p> 
     </div> 
     <div class="clear"></div> 
     <div class="grid_8 omega"> 
     <p>comments stuff here</p> 
     </div> 
    </div> 
    </div> 
</div>

這裏是borderupdown CSS

.borderupdown 
{ 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
    margin-bottom:2px; 
}

類borderupdown是一個簡單的1px的邊框頂部和底部。我的「理解」是，由於其他div嵌套在該類下，它應該創建一個1px邊界頂部和底部。相反，我得到的兩個邊界都以可視方式顯示在它們之間的2px邊距上。至於爲什麼，我完全困惑。（萬一它很重要，我使用流暢的960網格系統。）

謝謝。

來源

2013-02-16 TheEditor

聽起來好像你已經偶然發現容器中浮動的元素不包含在容器的維度中的問題。（我相信其他人有更好的措辭......）。默認情況下，浮動元素不包含在任何容器的尺寸計算中。你正在尋找什麼叫做「clearfix」。看看這篇文章的一個非常好的，詳細的修復列表：What methods of ‘clearfix’ can I use?

來源

2013-02-16 15:59:42

Brian，謝謝。我甚至不會假裝我明白爲什麼，但它是有效的。非常感謝你。 – TheEditor 2013-02-16 16:07:40

960網格邊界混亂。

回答

相關問題