4
我剛開始學習使用Drupal，Omega 4主題的響應式設計技巧，並希望使用奇點網格系統。 我不太瞭解CSS（基本原理是，微妙之處不），而SASS似乎是一種逃避某些更神祕功能的手段（有點像jQuery可以幫助您避免Javscript）。 由於我真的是一個初學者，我以爲我會盡可能簡單地從一個虛擬頁面開始。所以，這裏是HTML：試圖讓div在網格中並排顯示使用奇點gs
<html>
<head>
<title>Singularity HTML Demo</title>
<link rel="stylesheet" href="stylesheets/test-grid_1.css">
</head>
<body>
<div id="page">
<h1>Page tests_1</h1>
<div id="foo">
<h2>Foo</h2>
<p><p>Aliquam nulla metus, laoreet non felis ut, commodo laoreet nulla. </p></p>
</div>
<div id="bar">
<h2>Bar</h2>
<p>Morbi volutpat justo ante, et laoreet est porttitor id. Nullam rhoncus ipsum leo, sed tincidunt ante consequat in.</p>
<p>Quisque porttitor tincidunt hendrerit. Nulla et urna nisi. Fusce vulputate aliquet posuere. Cras tempor ante vel turpis scelerisque mollis. In bibendum augue in tincidunt vulputate. Donec accumsan sapien et molestie sodales. Maecenas ut arcu et arcu congue rhoncus. Suspendisse potenti. Nulla vehicula est ut ante semper lobortis. Maecenas sit amet porta mi, nec mattis dui. Curabitur tempus, magna a volutpat auctor, tellus diam pretium sapien, a accumsan augue lectus et est. Quisque sollicitudin metus tincidunt massa fermentum; non varius libero bibendum.</p>
</div>
<div id="baz">
<h2>Baz</h2>
<div>
<p>Baz</p>
<p>Vestibulum quis tristique arcu. Cras nec est aliquet, vehicula dolor sed, fermentum eros. Maecenas et commodo diam. Aenean egestas nulla a dolor aliquet pellentesque. Nunc enim tellus, sagittis sit amet ipsum nec, bibendum dictum nisl. Nam sollicitudin quis orci sed consequat. Nam et imperdiet ipsum, aliquam cursus nulla. Morbi erat magna, rhoncus vel velit vel, sollicitudin imperdiet orci. Quisque posuere at leo in pellentesque. Vestibulum ornare nulla odio, id mollis lorem blandit eget. Donec est sem, adipiscing eu ligula at, blandit lobortis magna. Nam tempus, risus vitae lacinia consectetur, leo orci fringilla arcu, facilisis blandit metus leo eget eros. Donec pellentesque est eget nulla ultricies, nec placerat risus sagittis. Nulla elementum metus nisi, eget sagittis risus commodo vitae. Pellentesque imperdiet porta vestibulum!</p>
</div>
</div>
<div id="qux"><p>Qux</p></div>
<div id="waldo"><p>Waldo</p></div>
<div id="garfield"><p>Garfield</p></div>
<div id="dilbert"><p>Dilbert</p></div>
</div>
</body>
</html>
我做這開始了只顯示在一列一個接一個地在所有的div一個SASS的樣式表，而工作（不困難！）。我想張貼一張圖片來展示我的意思，但顯然我不能！
然後，我嘗試添加一個斷點，並嘗試修改sass代碼，以便它顯示在2列網格上，每個div交替顯示在左側和右側。 這是我用青菜代碼奇：
@import "singularitygs";
$include-border-box: true;
$break: 500px;
$break2: 800px;
$break3: 1200px;
$include-clearfix: true;
$grids: add-grid(1);
$grids: add-grid(2 at $break);
$grids: add-grid(2 8 2 1 at $break2);
$grids: add-grid(12 at $break3);
$gutters: add-gutter(1/6);
body {
margin: 0;
padding: 0;
@include background-grid;
}
#foo {
background-color: red;
color: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#bar {
background-color: green;
color: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#baz {
background-color: purple;
color: whitesmoke;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#qux {
background: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#waldo {
background: blue;
color: whitesmoke;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#garfield {
background: orange;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#dilbert {
background: cyan;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(2, 1);
}
}
當斷點踢，金都加菲貓和Qux擁有所有移動一直到顯示器的頂部 - 美孚已經成爲完全看不見的和被覆蓋。 我通過擺弄「清楚：兩面/左面/右面」來獲得接近我想要的東西的方法，但這是絕望的經驗，我相當肯定不夠強大。我一定會錯過一些東西，但如果有人能告訴我什麼，我將非常感激！
非常感謝您花時間。我承認我一遍又一遍地嘗試瞭解「浮動」是如何工作的，但卻發現它完全違反直覺。我設法通過添加'$ output：'float';'來獲得相同的結果。但是，這並不是我想要的。我真的很想讓Baz向上移動，因此它直接在Foo下開始，同樣的，Garfield也向上移動，所以它直接在Qux下開始。但這甚至可能嗎？ –
我已更新我的答案，解答您的評論。 –
再次更新，添加了相關奇異性問題的鏈接。請參閱Snugug的答案。 –