使用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

回答

相关问题