使用LESS CSS計算寬度爲百分比減去保證金

我在CMS應用程序中使用Twitter Bootstrap網格系統。使用LESS CSS計算寬度爲百分比減去保證金

當用戶構建頁面時，他們可以將任意數量的列添加到行中。考慮該行：

<div class="span9 row"> 
    <div class="span5">span5</div> 
    <div class="span4">span4</div> 
</div>

我想做的事情，就是添加一個功能，用戶可以設置一個行平均分配中的列之間的寬度。

因此span5和span4類將被覆蓋。這本質上就像是一個表格行，但我認爲將行設置爲display: table-row是很不方便的，它可能會破壞TwBootstrap網格的響應功能。

我想什麼來避免，是寬度的每個組合定義爲這樣：

<div class="span9 row shared child-count-2"> 
    <div class="span5">span5</div> 
    <div class="span4">span4</div> 
</div>

而且在CSS：

.row.span9.shared.child-count-2 > div { 
    width: 340px; 
}

既然我已經使用CSS少，我認爲可能有一個方便的計算可以使這項工作。

問題是指定50％的寬度沒有考慮到的margin-left。所以我需要將每行的寬度減去20px。然後將剩餘寬度除以列數。

此外，我想避免使用JavaScript。我不喜歡渲染99％的視圖，然後在腳本中進行調整。如果腳本執行得到很小的延遲，用戶將看到佈局閃爍。不好。

那麼，有沒有辦法從LESS/CSS做到這一點？

來源

2012-06-03 MartinHN

您可以使用LESS實現。用量少，您可以使用JavaScript表達式的評估包裝他們進入反單引號：

@var: `"hello".toUpperCase() + '!'`;

所以，你也可以使用之類的東西document.getElementById('myId').width獲取元素的寬度等..請在這裏lesscss.org並轉到「 JavaScript評估「部分。

如果您需要更多幫助，只需詢問！ :)

來源

2012-06-04 10:54:54 acidghost

據我所見，該腳本將在編譯時進行評估。由於我預先編譯了所有'less'文件''「hello」.toUpperCase（）+'！'''最終會說'HELLO！'' - 並且計算寬度的腳本將失敗。在編譯時'document'是'undefined'。 – MartinHN

我認爲沒有其他方法可以做你想做的！ 'div'元素被渲染到文檔中時計算'row'寬度。獲取寬度的唯一方法是在運行時，當'row'元素準備就緒時。你不應該編譯你的LESS，或者在你的HTML主體的末尾添加一行Javascript和CSS，但正如你在你的問題中所說的，對於較慢的連接，腳本執行會稍微延遲，用戶會看到佈局閃爍。我的建議是嘗試這些JavaScript方法並測量頁面加載速度，進行一些優化並評估延遲的優點和缺點！ – acidghost

我想我會創建一個更「絕對」的LESS腳本，將其編譯爲每個組合的特定寬度。多一點工作，但更好的解決方案恕我直言。 – MartinHN

使用LESS CSS計算寬度爲百分比減去保證金

回答

相關問題