創建流體網格 - 百分比似乎混亂

我在看Skeleton框架（getskeleton.com），但我想要一個流體網格系統。我也對這些網格的內部工作感興趣，所以我決定推出自己的網格。創建流體網格 - 百分比似乎混亂

但是，我遇到了two.columns百分比的問題。所有其他列寬工作正常。首先，這裏發生的事情：

enter image description here

有明確出毛病了第二排，我真的無法弄清楚它是什麼。

我此佈局的代碼如下：

$max-width: 600px; 

    .container { 
    @include container($max-width); 

    .column, .columns { 
     @include columns($max-width); 
    } 

    .one.column, .one.columns { width: perc(30px, $max-width); } 
    .two.columns    { width: perc(80px, $max-width); } 
    .three.columns    { width: perc(130px, $max-width); } 
    .four.columns    { width: perc(180px, $max-width); } 
    .five.columns    { width: perc(230px, $max-width); } 
    .six.columns    { width: perc(280px, $max-width); } 
    .seven.columns    { width: perc(330px, $max-width); } 
    .eight.columns    { width: perc(380px, $max-width); } 
    .nine.columns    { width: perc(430px, $max-width); } 
    .ten.columns    { width: perc(480px, $max-width); } 
    .eleven.columns   { width: perc(530px, $max-width); } 
    .twelve.columns   { width: perc(580px, $max-width); }

這裏是混入/功能，我用，不知道這是很重要的：

@function perc($width, $container-width) { 
    @return percentage($width/$container-width); 
} 

@mixin container($width) { 
    position: relative; 
    width: $width; 
    margin: 0 auto; 
    padding: 0; 
} 

@mixin columns($max-width) { 
    float: left; 
    display: inline; 
    margin: 0 10px; 
}

在HTML文件中的代碼是隻是：

<% 6.times do %> 
    <div class="two columns box"></div> 
<% end %>

我覺得如果百分比的計算出了問題，所有的行都會以這種或那種方式混亂起來。然而，這只是第二個。如果有人看到這裏發生了什麼，請賜教？

我把處理CSS上引擎收錄：http://pastebin.com/bxq1a5Ge

在此先感謝。

來源

2012-03-04 cabaret

顯然

perc(80px, 600px)給13.333%。

當我使用width: 13.3333333%時，問題得到解決。

來源

2012-03-05 01:18:59 cabaret

Sass默認情況下使用3小數位。請參閱[本文的Stack Overflow問題]（http://stackoverflow.com/questions/7672473/sass-and-rounding-down-numbers-can-this-be-configured）以獲取有關如何覆蓋此設置的說明。 – steveax 2012-03-05 01:54:43

我認爲你需要將你的利潤率換算成百分比。每當一個div橫跨多於一列時，20px的排水溝寬度被轉換成百分比作爲塊寬度的一部分。這會在某個時候出錯。

另一種選擇是，它是一個舍入問題，因爲瀏覽器無法將百分比值整齊地轉換爲像素值。

由於jsfiddle支持SCSS，我已經設置了一個基本的jsfiddle of the issue。該示例顯示選項2是一個很好的候選，但我建議將所有寬度更改爲百分比。

來源

2012-03-04 23:52:24 lnrbob

我剛剛在Firefox中測試了它，它在那裏看起來沒問題。它不在Chrome中。您設置的JSFiddle在Chrome中看起來也很糟糕，就像我的屏幕截圖一樣。這是否意味着我應該放棄流暢性？有點困惑現在:( – cabaret 2012-03-04 23:58:15

是的，很抱歉，我認爲我提到過。鉻是四捨五入的... ... – lnrbob 2012-03-05 09:00:09

創建流體網格 - 百分比似乎混亂

回答

相關問題