1

我正在编写一个应用程序，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它确实会显示缩进。我想我知道这里出了什么问题，但是显示它们缩进的优雅解决方案是什么？

谢谢

4

3 回答 3

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;
}
于 2013-07-07T20:19:26.947 回答
0

这可以通过 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
}
于 2013-07-07T19:04:41.127 回答
0

只需添加这些 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;
}

这是一个演示

于 2013-07-07T19:07:00.247 回答