刪除網頁中的空白間距 - CSS 960.gs

我目前正在從頭開發我的投資組合網站。我讀過一個名爲「960.gs」的CSS框架，我用過類似的東西，但之前我從來沒有使用CSS純框架，所以自然有點生疏。刪除網頁中的空白間距 - CSS 960.gs

無論如何，這裏是我的網站。我想刪除頂部具有「標題」的兩段之間的白色間距。我不確定是什麼導致它，因爲，誠然，我的CSS也有點生疏。

My website

的任何解決方案，將不勝感激。

我的HTML：

<section class="container_12"> 
    <article class="grid_9"> 
     <h1>Title</h1> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </article> 

    <aside class="grid_3 "> 
     <h1>More</h1> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </aside>  

    <article class="grid_9"> 
     <h1>Title</h1> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </article> 

    <article class="grid_9"> 
     <h1>Title</h1> 

     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </article> 
</section>

我的CSS（非常小的，在這一點上）：

@import url("nav.css"); 
@import url("960.css"); 

body { 

} 

a { 
    font-family:arial; 
} 

h1 { 

} 

h2 { 

} 

h3 { 

} 

h4 { 

} 

h5 { 

} 

/* MAIN CONTENT */ 

* { 

} 

.container { 
    margin:0 auto; 
    max-width:1100px; 
    width:90%; 
}

960.gs CSS（代碼被激活）：

body { 
    min-width: 960px; 
} 

/* `Container 
----------------------------------------------------------------------------------------------------*/ 

.container_12, 
.container_16 { 
    margin-left: auto; 
    margin-right: auto; 
    width: 960px; 
} 

/* `Grid >> Global 
----------------------------------------------------------------------------------------------------*/ 

.grid_1, 
.grid_2, 
.grid_3, 
.grid_4, 
.grid_5, 
.grid_6, 
.grid_7, 
.grid_8, 
.grid_9, 
.grid_10, 
.grid_11, 
.grid_12, 
.grid_13, 
.grid_14, 
.grid_15, 
.grid_16 { 
    display: inline; 
    float: left; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

/* `Grid >> 12 Columns 
----------------------------------------------------------------------------------------------------*/ 

.container_12 .grid_1 { 
    width: 60px; 
} 

.container_12 .grid_2 { 
    width: 140px; 
} 

.container_12 .grid_4 { 
    width: 300px; 
} 

.container_12 .grid_5 { 
    width: 380px; 
} 

.container_12 .grid_7 { 
    width: 540px; 
} 

.container_12 .grid_8 { 
    width: 620px; 
} 

.container_12 .grid_10 { 
    width: 780px; 
} 

.container_12 .grid_11 { 
    width: 860px; 
}

來源

2015-06-16 AdamMcquiff

提供寬度請發表您的代碼。沒有人能夠從截圖中幫助你。 –

我只是假設這是一個常見的錯誤，將有一個通用的解決方案，表示歉意。 – AdamMcquiff

看起來你的「更多」段落到目前爲止正在推動另一段落，我不是家族成員，但我敢打賭你右邊的paragreaph是問題所在。 –

只需使用框架來構建主佈局（列等）。 Example

<main class="container_12"> 
    <div id="main-column" class="grid_9"> 
    ... 
    </div> 
    <aside class="grid_3"> 
    ... 
    </aside> 
</main>

而且似乎你的CSS不是爲grid_3或grid_9

來源

2015-06-16 17:43:34 sgromskiy

是的，似乎他的「.container_12 .grid_3」和「.container_12 .grid_9」也從他的默認CSS中丟失。 –

這工作完美，好主意！他們在代碼中，出於某種奇怪的原因，當我將代碼複製到奇怪的時候，他們還沒有出現。 – AdamMcquiff

將右列更改爲正確的浮動狀態，看起來應該更好。

aside.grid_3 { 
    float:right ; 
}

來源

2015-06-16 17:39:34 codedude

是的，這可以起作用，但可能並不需要！重要的屬性。（或不應該） –

@MichaelG Yup。固定。這應該覆蓋.grid_3 {float：left}屬性是否正確？即使是！重要的？ – codedude

是的，先生，只要它在CSS中的float：left類之後。 =） –

似乎你的CSS沒有提供grid_3或grid_9的寬度。此外，您並未指定要將<aside>浮動到任何位置（至少可以看到）

相應地設置一個寬度like this fiddle here and it should function。

body { 
    width: 100%; 
    max-width: 960px; 
} 

aside {float:right; width:30%; max-width: 300px;} 
article {float:left; width:60%; max-width: 600px;} 
.clear {clear:both;}

這應該是一個很好的起點。

來源

2015-06-16 17:42:53

刪除網頁中的空白間距 - CSS 960.gs

回答

相關問題