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

divをネストpost-*して、親子関係があることをより明確にすることができます（少なくとも、投稿に基づいて私が想定していることです）：

<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

次の 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 に答える
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 に答える