0

次の問題があります。

Web サイトのデータベースから複数のアイテムを表示しています。彼らは2x2を注文した、うまく見えます。

A  B
C  D
E  F

ただし、4 行目では 1 つの項目のみが表示され、次の項目が次の行に表示されます。

テストはhttp://www.tahara.es/storeで確認できます。

私のコードは次のようになります。

while($info = $items->fetch(PDO::FETCH_ASSOC)) 
{

?> 
<div name='item' id='<?php echo $info['color_base1']; ?>' class='itemBox'>
    <div class='showItem'><a href='items_descr.php?itemId=<?php echo $info['id_item']; ?>'>
        <img class='itemImage' alt='' src='<?php echo "../images/".$info['imageMid']; ?>.jpg'>
        </img>
    </div>
    <br />
    <div class='indexItemText'>
        <span class='similarItemsText'>
            <a href='items_descr.php?itemId=<?php echo $info['id_item']; ?>'><?php echo $info['name']; ?></a>
             - $<?php echo $info['price']; ?> </span>
    </div>
</div>

<?php $row_count++;

if ($row_count % 2 == 0) 
    {
echo "<br />"; // close the row if we're on an even record
    }

}               
?>
4

1 に答える 1

1

これはCSSの問題です。コードの改行の原因となる要素に追加clear:bothすることで解決できます。<span>

現在、ペアで写真を一覧表示しています。<span>次のように、空のタグを使用して各ペアの間に改行を強制します。

A    B
-- span --
C    D
....

ただし、sがフローティングであるため、この<span>タグはすべてのsでうまく機能するわけではありません。フロートする要素は、フロートしない要素とは異なる場所にレンダリングされます。この特定のケースでは、すべてのタグが実際にはページの上部近くにレンダリングされます。<div><div><span>

-- span --
-- span --
A    B
C    D
...

CSS属性を<span>追加することで、sにフローティング要素の位置を尊重させることができます。clear

span {
display: block;
clear:both; /* this element will respect the location of anything that floats right or left */
}

この特定のにクラスを追加することも検討し<span>ます。<span>は共通の要素であり、それらすべてにclear:both意図しない結果をもたらす可能性があります。

于 2013-02-01T01:05:04.380 に答える