1

foreach からの結果のリストを 2 つの列にスタイル設定しようとしていますが、PHP を捨てずにそれを行う方法がよくわかりません。

現在、すべてが以下のようになっています。 現在のレイアウト

そして、私はそれがそのように見えることを望みます: 希望のレイアウト

現在、私の foreach と CSS は次のようになっています。

<p class="title">Reviews</p>
            <section id="reviews">
                <ul class="section_body">
                    <?php
                        foreach($reviews['reviews'] as $rv){
                            if ($rtmp++ < 10);
                            if ($rv['freshness'] == 'fresh') {
                               $image = "fresh";
                            }
                            else {
                                $image = "rotten";
                            }

                            echo '<img src="assets/images/' . $image . '.png" class="rating" title="Rotten" alt="Rotten" />';
                            echo '<li>' . $rv['quote'] . '</li>';
                        }
                    ?>
                </ul>
            </section>

現在の CSS

助けていただける方、よろしくお願いします！大変ありがたく頂戴いたします。

4

2 に答える 2

1

私は通常cssを使用してこの種のタスクを実行し、ブラウザーに処理を任せます

#reviews li
{
  float:left;
  width: 45%;
  ...
}

これらの 2 行を CSS に追加し、ブラウザーに配置を任せます。アイデアは、各 li がコンテナーの半分 (50%) を取るようにすることです。余分なパディング、マージン、ボーダーを処理するために 45% にしました

また、あなたの引用と画像はliにある必要があります

 <li> <img src="..." />  <span>my quote here</span>  </li>
于 2012-12-08T16:08:12.697 に答える
0

以下のコードを試してください

<section id="reviews">                
<?php
$i=0;
foreach($reviews['reviews'] as $rv)
{
    if($i++%2 == 0)
    {
        echo '<ul class="section_body">';
    }
    if ($rtmp++ < 10);
    if ($rv['freshness'] == 'fresh') {
       $image = "fresh";
    }
    else {
        $image = "rotten";
    }

    $img =  '<div><img src="assets/images/' . $image . '.png" class="rating" title="Rotten" alt="Rotten" /></div>';
    echo '<li>' .$img . $rv['quote'] . '</li>';

    if($i%2 == 0 || $i== count($reviews['reviews']))
    {
        echo '</ul>'
    }
}
?>
</section>

画像とレビュー テキストを li 要素内に配置する必要があります。

于 2012-12-08T16:12:52.057 に答える