使固定宽度的 <div> 序列以四行显示答案

【问题标题】：Making sequence of fixed-width <div>s display in rows by four使固定宽度的 <div> 序列以四行显示
【发布时间】：2014-02-05 20:28:21
【问题描述】：

我有这个代码：

<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 个水平结果。

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

图片鲍勃米克简图片罗伊麦克六月图片米娅罗伊简图片娄鲍勃六月图片围兜嘲笑晋图片 Beb 渣琼斯图片雷抢米娅

并希望它显示为：

图片 Bob 图片 Roy 图片 Mia 图片 Lou 米克·麦克·罗伊·鲍勃简六月简六月图片 Bob 图片 Roy 图片 Mia 米克·麦克罗伊简·简·简

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

【问题讨论】：

你的代码能正常工作吗？ ....
计算结果，添加style="float: left;"，直到结果达到% 4 == 0，然后添加style="clear: both;"
正如我所说，我需要一些很好的解释......当你说“计算结果”时......我开始指着屏幕去 1 -2 -3 LOL
顺便说一句，输出代码可能不是 100% 正确，但在现场是正确的。问题是如何让
s 在打破到新行之前一次显示水平不超过 4 :)
@CMilla 你的脚本肯定不工作。至少在 $query 定义之后，您会错过结束引号和分号。认真阅读我链接到的 MCVE 帮助页面。

标签： php css sql

【解决方案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>";          
}

【讨论】：

【解决方案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;
}

【讨论】：

是的，这让我更接近了 :) 生病玩这个，看看我是否能 100% 得到它：D

【解决方案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>

这是输出的图像

就像@DanFromGermany 提到的那样，它会清除浮动，并通过使用结果计数在最后添加一个清除。

$count = count($pictures);

然后它确定最后一个结果形式

elseif($i == $count)

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

$i++;

希望这会有所帮助。

【讨论】：