プレストトップの1行目の2つの製品、次に3つ

Question

私はprestashopの建物の店です。私のメインページで、私は製品のリストを持っており、それは次のようになります。

X =製品

X X X 

X X X 

しかし、私は、私は最初の要素の上にn番目の子を行うと

X X 

X X X 

X X X 

にそれを変更したいですそれは動作しますが、それはそれのように見えます

X X 

X 

XXX 

これはそうではありません。どのように私はこれに到達できますか？

コード：

<ul id="products"> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
</ul> 

と：あなたのコードは、あなたの質問に答えるが、このようにしてみてくださいするのに十分でないため

.product:nth-child(1) { 
    display: block; 
    width: 50% !important; 
} 

Answer 1

これは正確な答えではありません。

//JQuery 
$(window).on('load', function() { 
    $("#products:nth-child(3)").append("<li></li>"); 
}) 

// Javascriptを

$(window).load(function(){ $("#products:nth-child(3)").append("<li></li>"); }) 

あなたの問題を解決するためのjQuery/JSから空liとして第三の要素は、あなたができるあなたに

<ul id="products"> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
    <li><li> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
    <li class="product"><div>DESCRIPTION HERE</div><li> 
</ul> 

Answer 2

を与える追加する

試してみますこれにはいくつかの方法があります。flexbox：

#products { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.product { 
 
    list-style: none; 
 
    width: 33%; 
 
} 
 

 
.product:nth-of-type(2) { 
 
    width: 66%; 
 
}

<ul id="products"> 
 
    <li class="product"> 
 
    <div>DESCRIPTION HERE</div> 
 
    </li> 
 
    <li class="product"> 
 
    <div>DESCRIPTION HERE</div> 
 
    </li> 
 
    <li class="product"> 
 
    <div>DESCRIPTION HERE</div> 
 
    </li> 
 
    <li class="product"> 
 
    <div>DESCRIPTION HERE</div> 
 
    </li> 
 
    <li class="product"> 
 
    <div>DESCRIPTION HERE</div> 
 
    </li> 
 
    <li class="product"> 
 
    <div>DESCRIPTION HERE</div> 
 
    </li> 
 
    <li class="product"> 
 
    <div>DESCRIPTION HERE</div> 
 
    </li> 
 
    <li class="product"> 
 
    <div>DESCRIPTION HERE</div> 
 
    </li> 
 
</ul>