在 css 的帮助下缩进生成的 html div 类

Question

我正在用rails. 编写一个应用程序我对css 还不是很熟悉。虽然，我正在努力。还有一个问题，我生成的html标签是

<div class="sub-product post-1">
 // content goes here
</div>

<div class="sub-product post-2">
 // content goes here
</div>

<div class="sub-product post-3">
 // content goes here
</div>

<div class="sub-product post-4">
 // content goes here
</div>

现在，如您所见，post 排列了不同的数字。我试图做的是让他们缩进，这是我的 css

.sub-product.post-1 {
margin:30px
}

它有效，但如果我让它.sub-product.post-1.post-2.post-3.post-4 它确实显示缩进。我想我知道这里出了什么问题，但是显示它们缩进的优雅解决方案是什么？

谢谢

Answer 1

您可以嵌套您的 post-* div，以更清楚地表明它们具有父子关系（至少这是我根据您的帖子所假设的）：

<div class="sub-product post-1">
// content goes here
    <div class="sub-product post-2">
    // content goes here
        <div class="sub-product post-3">
        // content goes here
           <div class="sub-product post-4">
               // content goes here
           </div>
        </div>
    </div>
</div>

这样你只需要以下 CSS：

.sub-product[class^=post-] { // class starts with post-
    margin-left: 30px;
}

Answer 2

只需添加这些 CSS 规则：

.sub-product {
    border: 1px solid gray;
}

.post-1 {
    margin-left: 30px;
}

.post-2 {
    margin-left: 60px;
}

.post-3 {
    margin-left: 90px;
}

.post-4 {
    margin-left: 120px;
}

这是DEMO

Answer 3

这可以通过 jQuery 巧妙地完成。只需将以下代码添加到您的 HTML 文档中，您就可以对任意数量的 div 执行此操作。

<script>

//iterate through all divs that have .sub-product class
$('.sub-product').each(function(){

    //save the class of each div in a variable
    var num = $(this).attr('class');

    //fetch just the number from each classname
    num = num.replace('sub-product post-', '');

    //change the margin-left of each div based on its class number
    $(this).css({
        marginLeft: num*30+'px'
    });
});
</script>

工作示例：http://jsfiddle.net/Tv347/11/

否则，如果你严格地想使用 CSS，你最好的办法是像这样将样式应用于单个 div：

.post-1{
    margin-left:30px
}

.post-2{
    margin-left:60px
}

.post-3{
    margin-left:90px
}

.post-4{
    margin-left:120px
}