Question

我从4行查询中检索。

此行恢复id（设置href），图像路径和标题。

例如，第一行的代码是：

<div class="row">
<div class="col">
 <a href="id">
  <img src="file">
   <p class="titulo-noticia">The title</p>
 </a>
</div>
<div class="col">
 <a href="id">
  <img src="file">
   <p class="titulo-noticia">Another title</p>
 </a>
</div>
</div>

我使用以下方法实现这一目标：

echo "<div class='table'>"
 for($i=0;$i<2;$i++){
  echo "<div class='row'>"
  for($j=0;$j<2;$j++){
   echo "<div class='col'>"
   echo "<a href='id'>
      <img src='file'>
       <p class='titulo-noticia'>".$title."</p>
     </a>"
   echo "</div>"
  } //end col loop
  echo "</div>"
 } //end row loop
echo "</div>"

CSS是：

.col{
    display: table-cell;
}

.row{
    display: row;
}
.table{
    display: table;

}

这是显示php内容的2 * 2矩阵的正确方法吗？或者有更好的方法使用css？

谢谢。

Answer 1

我认为这不是最佳方式，但这是CSS的另一种方式。基本上只需将所有查询结果回显到一个容器div中，而不必担心行。使用float: left和width: 50%在div中显示每个结果，然后他们会创建自己的行。

<div class="matrix">
    <?php while ($row = however_youre_fetching_them()): ?>
        <div class="cell">
            <a href="<?= $row['id'] ?>">
                <img src="<?= $row['path'] ?>">
                <p><?= $row['title'] ?></p>
            </a>
        </div>
    <?php endwhile ?>
</div>

和CSS

.cell {
    height: 100px;
    width: 50%;
    float: left;
}

在单元格上设置恒定高度应确保行正确排列。

Answer 2

你过度复杂了。

你需要通过块来完成它，array_chunk()完美无缺：

foreach(array_chunk($array, 2) as $chunks){
   //<div class="row">
   foreach($chunk as $chunk){
       //<div class="col"></div>
   }
   //</div>
}

回声两行两个的最佳方式？

2 个答案: