使用CSS創建縮進DIV

我想弄清楚如何開發一個我們可以用來組織雜誌的頁面。雜誌將有多個部分包含多個頁面，每個頁面可能有多個文章。爲了達到這個目的，我希望每個頁面或部分都有一個DIV，以表示它從屬於它上面的組。這裏是什麼，我希望它看起來像一個畫面：使用CSS創建縮進DIV

http://chromaticinc.com/help/final.png

我想只用CSS來實現這一目標。到目前爲止，我已經想出了這一點：

http://chromaticinc.com/help/

但它使用JavaScript來設置第一列的寬度，因爲每個其他列有排隊也與可變寬度在第一列，它拋出了佈局。我確定我可以使用Javascript來設置「評論」欄的寬度，但我覺得必須有更好的使用CSS的解決方案。我打開使用表，如果它是有意義的，但每個項目必須是可拖動的，以便他們可以重新安排，他們將不得不能夠被移動到其他部分，所以我'已經將它們設置在DIV中以使其更容易。

任何幫助或建議將不勝感激。

來源

2012-11-05 Brian Mann

我會考慮使用嵌套風格的無序列表。它們有很好的語義。 –

謝謝，這是一個好主意。我一定會考慮這樣做，但我仍然無法弄清楚如何在不使用Javascript的情況下將列排成一行。 –

顯示一些html？現有的CSS？ – VIDesignz

你應該可以使用relative positioning來做到這一點。

你會想給元素的ID，然後使用一些CSS這樣的：

#divid { 
    position:relative; 
    left:20px; 
}

這將迫使div來搬過來不過多，你從它的默認位置指定。

來源

2012-11-05 20:27:05 Patrick548

感謝您的回答，但我實際上使用了一個類並設置了左邊距，這樣進一步的嵌套也會產生縮進。問題是保持第2列排隊，因爲我不知道會有多少級別的縮進。 –

在這種情況下，您可以對div內的元素使用絕對定位。左偏移的絕對值將強制元素排列。 – Patrick548

使用CSS創建縮進DIV

回答

相關問題