0

偶数/奇数の決定と、それを使用してdivのクラスを変更することに関する多くの情報を読みました。

私の場合、新しいメッセージが投稿されるたびに、MessagePicture と MessageText という div の位置を切り替えたいと考えています。

  1. 写真左、テキスト右
  2. 写真右、テキスト左
  3. 写真左、テキスト右
  4. など。

これは、メッセージを表示するために使用しているコードです。また、偶数/奇数コードを機能させるための試みの 1 つも含めました。

機能させるために何を変更すればよいか、誰か教えてもらえますか?

    <?PHP

    $Query =
    "
            SELECT
                ID,
                NameBox,
            MessageBox,
            Code
        FROM
            messages
            ORDER BY
                ID
            DESC LIMIT 10
    ";

    $Result = mysql_query($Query);

        if(!$Result)
            {
            echo 'ERROR: '.mysql_error();
            }

        else
            {
            if(mysql_num_rows($Result) == 0)
                {
                    echo 'No results';
                }

                else
                    {
                    $i = 0;
                $class = (++$i % 2) ? 'even' : 'odd';
                    while
                    ($Row = mysql_fetch_assoc($Result))

                        echo '

<div id="MessageWrapper">
    <div id="MessagePicture" class="'.$class.'">                                                                                
        <style>                                             
        #MessagePicture { 
        background-image: url(../../../Images/'.stripslashes($Row['Code']).'.png);  
        background-repeat: no-repeat; 
        background-position: center
        </style>
        </div>

    <div id="MessageText" class="'.$class.'">

        <div id="MessageTitle">

            <h1>'.$Row['NameBox'].'</h1>

        </div>

        <div id="MessageContent">                                                   
            <p>'.nl2br($Row['MessageBox']).'</p>
        </div>

    </div>

</div>  

';}}}?>
4

2 に答える 2

2

これは正確な問題に対する答えではないかもしれませんが、どのマークアップにも子要素の行が偶数で奇数であるという情報が既に含まれているため、CSS はこれらを区別できるため、純粋な CSS を使用してこれを実現できます。私がここで大胆に提供するものです。

CSS セレクター:nth-child(even)とを使用:nth-child(odd)して、それぞれ偶数と奇数の子を選択します。そうすれば、マークアップを変更したりタグ付けしたりする必要もありません。例：

<ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li>
    <li>Pears</li>
    <li>Pineapples</li>
</ul>

li:nth-child(even)
{
    background-color: silver;
}

li:nth-child(odd) /* or leave this one out altogether */
{
    background-color: white;
}

詳細と使用法については、次のやや権威のあるページを確認してください ( などnth-child(5n+3))。

http://www.w3.org/Style/Examples/007/evenodd.en.html

于 2013-06-13T13:09:45.667 に答える