1

画像、タイトル、作成者、説明などの記事の詳細を 3x2 形式のマトリックスで表示する必要があります。

以下を使用classして記事の詳細をラップします

#article2x3-article-wrapperHP
{
float:left;
width:233px;
height:340px;
background-color:#ccc;
vertical-align:middle;
margin-right:25px;
}

このクラスには margin-right: 25px があり、これがmargin-right:25px;すべての div に追加され、デザインが壊れ、コンテナーの幅が750px1 つしかありません。

margin-right:0px;デザインを修正するために jquery を使用して割り当てることを考えましたが、うまくいきません。margin-right: 0px;jqueryを使用して3番目と6番目のDIVに割り当てることができるようにjqueryを修正するにはどうすればよいですか 

 $(function () {
     $(".article2x3-outer-wrapperHP div:eq(3)").css("margin-right", "0px");
    $(".article2x3-outer-wrapperHP div:eq(6)").css("margin-right", "0px");
 });

以下は、デザイン用のサンプル HTML コードです。

<div id="article2x3-outer-wrapperHP">

        <div id="article2x3-HPTitle">
            <span id="MainContent_LatestTopSixArticles_lblArticle2x4Title">Current Articles</span>
        </div>

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div> 

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div> 

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div>      

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div> 

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div> 

        <div id="article2x3-article-wrapperHP">
            <div id="article2x3-image">
                <img src="../images/article/9f07eb06-7f9d-4f68-92e1-d99ea36ebb65.png" class="imgArticle2x3Image" id="MainContent_LatestTopSixArticles_rptTopSixArticles_imgArticle2x3Image_0">
            </div>
            <div id="article2x3-title">
                <span class="lblArticle2x3Title" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Title_0">Article One</span>
            </div>
            <div id="article2x3-author">
                <span class="lblArticle2x3Author" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Author_0">by Author</span>
            </div>
            <div id="article2x3-desc">
                <span class="lblArticle2x3Desc" id="MainContent_LatestTopSixArticles_rptTopSixArticles_lblArticle2x3Desc_0">My admiration for the amazing achievemen...</span>
            </div>
        </div>  

</div>

私は実際のWebページはasp.net-webformであり、リピーターコントロールを使用してこのdivを作成しています.jQueryを使用してフロントエンドで実行する方が便利なので、.csファイルで実行したくありません

フィドルの例

4

4 に答える 4

1

代わりにjQueryの:nth-child()セレクターを使用してください。http://api.jquery.com/nth-child-selector/ また、ページで

同じものを複数使用することは無効であることに注意してください。CSSセレクターとjQueryセレクターでsをesに変更し、それに応じてそれぞれをに変更するidと、問題ありません。idclass#.

于 2013-01-10T11:45:48.367 に答える
1

試す：

$(function () {
     $(".article2x3-article-wrapperHP:eq(3)").css("margin-right", "0px");
    $(".article2x3-article-wrapperHP:eq(6)").css("margin-right", "0px");
 });

divなしで...実際に彼に内側のdivのマージンを設定するように指示します..メインではありません。

編集：この効果が3番目の要素ごとに発生する場合は、これを使用できます。

$('.article2x3-article-wrapperHP:nth-child(3n)').css("margin-right", "0px");
于 2013-01-10T11:44:28.867 に答える
0

解決策：管理対象次のjQueryで動作させる

 $(function () {
   //  $(".article2x3-article-wrapperHP:eq(3)").css("margin-right", "0px");
     $('#article2x3-article-wrapperHP:nth-child(3n+1)').css('margin-right', '0px');
     $('#article2x3-article-wrapperHP:nth-child(6n+1)').css('margin-right', '0px');
 });
于 2013-01-10T11:54:35.630 に答える
0

cssファイルでに変更#article2x3-article-wrapperHPします。.article2x3-article-wrapperHP

id="article2x3-article-wrapperHP"に変更class="article2x3-article-wrapperHP" in your html file.

And use as script this:

$(function () {
  $(".article2x3-article-wrapperHP:nth-child(4)").css("marginRight", "0px");
  $(".article2x3-article-wrapperHP:nth-child(7)").css("marginRight", "0px");
});

私のために働いた！

于 2013-01-10T11:54:54.017 に答える