非語義網格框架似乎不會創建排水溝

此問題與非語義網格框架（unsemantic.com）有關。非語義網格框架似乎不會創建排水溝

這是我的html：

<!DOCTYPE html> 

<html> 

<head> 

    <link rel="stylesheet" href="css/unsemantic-grid-responsive-no-ie7.css" /> 

    <style> 
     div.blue { 
      background-color: #00f; 
     } 

     div.green { 
      background-color: #0f0; 
     } 
    </style> 


</head> 

<body> 

    <div class="grid-container"> 
     <div class="grid-30 blue"> 
      30% 
     </div> 
     <div class="grid-70 green"> 
      70% 
     </div> 
    </div> 


</body> 

</html>

這是與定義的關鍵環節涉及unsemantinc的CSS部分：

.grid-container:before, .clearfix:before, 
    .grid-container:after, 
    .clearfix:after { 
    content: "."; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    font-size: 0; 
    line-height: 0; 
    width: 0; 
    height: 0; 
    } 

    .grid-container:after, .clearfix:after { 
    clear: both; 
    } 

    .grid-container { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1200px; 
    padding-left: 10px; 
    padding-right: 10px; 
    } 

    .grid-5, .mobile-grid-5, .grid-10, .mobile-grid-10, .grid-15, .mobile-grid-15, .grid-20, .mobile-grid-20, .grid-25, .mobile-grid-25, .grid-30, .mobile-grid-30, .grid-35, .mobile-grid-35, .grid-40, .mobile-grid-40, .grid-45, .mobile-grid-45, .grid-50, .mobile-grid-50, .grid-55, .mobile-grid-55, .grid-60, .mobile-grid-60, .grid-65, .mobile-grid-65, .grid-70, .mobile-grid-70, .grid-75, .mobile-grid-75, .grid-80, .mobile-grid-80, .grid-85, .mobile-grid-85, .grid-90, .mobile-grid-90, .grid-95, .mobile-grid-95, .grid-100, .mobile-grid-100, .grid-33, .mobile-grid-33, .grid-66, .mobile-grid-66 { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding-left: 10px; 
    padding-right: 10px; 
    } 

    .grid-parent { 
    padding-left: 0; 
    padding-right: 0; 
    }

我使用unsemantic-grid-responsive-no-ie7.css文件。理論上，這應該創造兩個並列的div，一個佔30％的寬度，另一個佔70％的寬度。在它們之間，如果你願意（根據非語義）規範，應該有20px gutter或空格。

但是，我似乎無法得到陰溝。 divs只是粘在一起。

有什麼想法？

來源

2013-06-06 fizzy drink

看着你提供的代碼我看不出你是如何添加陰溝。你能添加相關的HTML/CSS片段來定義陰溝嗎？ – Doug

添加了CSS以顯示 –

溝槽被添加爲填充，而不是作爲邊距。

容器內的2列（帶背景顏色）不會有可見的20像素的排水溝。容器的每邊都有10px的填充，並且每一列的的內容都會有10px的填充。

如果你想要一個可見的陰溝，你需要嵌套一個額外的div或類似。

來源

2013-07-02 16:59:26 Wicky

對於基於邊距的裝訂線，您可以使用前綴 - {寬度}或後綴 - {寬度}類。

<div class="grid-35 suffix-5"> 
content 
</div> 
<div class="grid-60"> 
content 
</div>

應該給你兩列之間的5％。

來源

2014-01-30 00:41:02 atmarx

非語義網格框架似乎不會創建排水溝

回答

相關問題