Question

我有这段代码：

<div style="margin: 0 auto; display:block; width: 916px; overflow: auto;">
                <?php echo "";


     echo "<i>Owned: $line->phone </i><br><br>";

            $query = "SELECT person_id, person.name, person.sex, person.father_id, person.mother_id,PhotosComp.reference as reference
FROM person

WHERE person.id=$currId";
            $result = mysql_query($query);
            if (mysql_num_rows($result)>0) {    
            while ($line = mysql_fetch_object($result)) {



     echo "<div valign='top'>";

                 echo "";


            echo "<img src=".$line->reference." style=float:left; height='50px' border='1'>"; 

                    echo "";
                    echo "<a href='details.php?id=$line->person_id'>";
                    echo "<b>";
                    echo "$line->name</a>";
                    echo "</b>, <font size='-2'>(";
                    echo "$line->sex";
                    echo ", </font><font size='-2'>";
                    echo "$line->father_id";
                    echo "<br>";
                    echo "$line-mother_id";
                    echo "<br>";
                            echo "</div>";          
                }

            }echo "";
        ?>
      </div>

信息显示正确垂直...但我想显示4个结果水平然后突破新行。

所以我现在从数据库中得到这个结果：

PICTURE  Bob  
         Mick   
         Jane

PICTURE  Roy  
         Mack   
         June

PICTURE  Mia  
         Roy    
         Jane

PICTURE  Lou  
         Bob    
         June

PICTURE  Bib  
         Mock   
         Jine

PICTURE  Beb  
         Muck   
         Jone

PICTURE  Ray  
         Rob    
         Mia

并希望将其显示为：

PICTURE  Bob          PICTURE  Roy        PICTURE  Mia       PICTURE  Lou
         Mick                  Mack                Roy                Bob
         Jane                  June                Jane               June

PICTURE  Bob          PICTURE  Roy        PICTURE  Mia       
         Mick                  Mack                Roy             
         Jane                  June                Jane

DB的结果可以是0到15-20。我不需要任何上限。

Answer 1

试试这个，让我知道它是否有效。

if (mysql_num_rows($result)>0) 
{    

    $counter    = 0;   

    while ($line = mysql_fetch_object($result)) 
    {


        if($counter %4 != 0) 
        {
            #this will break your div  
            echo "<div valign='top' style='clear:both;'>";
        }
        else
        {
            echo "<div valign='top' style='float:left;display:block;'>";
        }


        //if ($line->reference = (NULL)) { echo "<img src=".$line->reference." style=float:left; height='50px' border='1'>"; 
        //else echo "<img src='../temp_pic.jpg' style=float:left; height='50px' border='1'>";}
        echo "";
        echo "<a href='page.php?id=$line->person_id'>";
        echo "<b>";
        echo "$line->name</a>";
        echo "</b><br>";


        echo "line->father_id";
        echo"<br>";
        echo "line->mother_id";

        $counter++;

    }
    echo "</div>";          
}

Answer 2

这样的脚手架可能会让你更接近你的目标。正如@DanFromGermany解释的那样，你需要在你的div元素下面clear:both。尽量不要在标记中添加样式标记，除非您的页面是超级优化的或其他东西。

标记

while($result) {
    echo "<div class=\"span-3\">";
    echo "<div>";
    echo "the content father->id line->person_id etc etc";
    echo "</div>";
    echo "</div>";
}

echo "<div class=\"clear-fix\"></div>";

CSS

.span-3 { 
    width:25%;
    float:left;
    margin:0; padding: 0;
}

.span-3 > div {
    margin: 10px; /* or some other value */
}

.clear-fix {
    clear:both;
}

Answer 3

以下是以您需要的格式显示图片的基本代码。您需要更改此设置以与while loop匹配，并更改clases和css代码以符合您的要求，即页面宽度等。

<style>
html {width:100%; background:#ffffff;}
body {max-width: 960px; background:red; margin:0 auto;}
img {max-width: 225px; height: auto;}
.clear {clear:both;}
.no-margin{margin:0 !important;}
.margin-right {margin-right: 20px;}
</style>


<div class="pic-wrap">
<?php
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';
$pictures[] = 'http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg';


$count = count($pictures);
$i=1;
foreach($pictures as $picture)
{
  if($i % 4 == 0)
  {
    echo '<img src="'.$picture.'" class="no-margin four">';
  }
  elseif($i == $count)
  {
    echo '<img src="'.$picture.'" class="margin-right">';
    echo '<div class="clear"></div>';
  }
  else
  {
    echo '<img src="'.$picture.'" class="margin-right">';

  }
  $i++;
}
?>
</div>

这是输出图像

enter image description here

就像@DanFromGermany提到的那样清除了浮点数，并且最后通过使用结果计数来增加清晰度。

$count = count($pictures);

然后确定此

的最后结果

elseif($i == $count)

在循环的每次迭代中$i递增。

$i++;

希望这有帮助。

使固定宽度<div>的序列按行显示为四行</div>

3 个答案: