1

我在我的网站上进行这项工作时遇到问题。我在 CSS 中有 3 列。我将 one_third 类用于前两列，将 one_third column_last 用于最后一列。我有多行：

<div class="one_third">
  <img src="images/content/about-grow.jpg" alt="" />
  <h4>Grow a Garden</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

<div class="one_third">
  <img src="images/content/about-wildlife.jpg" alt="" />
  <h4>Protect Wildlife</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

<div class="one_third column_last">
  <img src="images/content/about-volunteer.jpg" alt="" />
  <h4>Volunteer</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

这是我的 php.ini 文件。它现在只输出两列。我无法弄清楚如何正确输出最后一列。请帮忙！

<?
include("includes/connect.php");
$staff = mysql_query("SELECT * FROM programs ORDER BY title ASC");
$numrows=@mysql_num_rows($staff);
if($numrows != 0) {
while ($result_staff = mysql_fetch_array($staff)) {
?>

<?
if ($result_staff['image'] == "") {
?>

<div align="center" style="padding-bottom:2%" class="one_third">
    <a href="images/content/<? echo $result_staff['image2']; ?>" class="fancybox" title="<? echo $result_staff['name']; ?>"><img src="images/content/<? echo $result_staff['image2']; ?>" alt="<? echo $result_staff['name']; ?>" border="1" /></a><br /><h4><? echo strtoupper($result_staff['title']); ?></h4><p><? echo $result_staff['content']; ?></p>
</div>

<? } else { ?>

<div align="center" style="padding-bottom:2%" class="one_third">
    <a href="images/content/<? echo $result_staff['image']; ?>" class="fancybox" title="<? echo $result_staff['name']; ?>"><img src="images/content/<? echo $result_staff['image']; ?>" alt="<? echo $result_staff['name']; ?>" border="1" /></a><br /><h4><? echo strtoupper($result_staff['title']); ?></h4><p><? echo $result_staff['content']; ?></p>
</div>

<? } ?>
<? } } ?>
4

3 回答 3

1

使用 css 向左浮动。这将为动态内容提供列布局。此处提供示例工作网址：http: //sugunan.net/demo/float.php

以下是源代码。

<style>
.one_third{
    float: left;
    border: 1px solid;
    width:200px;
}
.wrapper{
    width: 610px;
}
.clear{
    clear: boath;
}
</style>


<div class="wrapper">

<?php for($i=0; $i<5; $i++){ ?>

<div class="one_third">
  <img src="photo.jpg" alt="" />
  <h4>Grow a Garden</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

<div class="one_third">
  <img src="photo.jpg" alt="" />
  <h4>Protect Wildlife</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>

<div class="one_third column_last">
  <img src="photo.jpg" alt="" />
  <h4>Volunteer</h4>
  <p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. sed.</p>
</div>
<div class="clear"></div>

<?php } ?>

</div>
于 2014-08-27T04:46:41.217 回答
0

您没有将 column_last 类添加到任何列中。

首先，在您的 while 循环上放置一个迭代器。定义 $i = 0; 在while循环之前。然后 $i++; 在while循环结束之前。

然后，您可以使用此迭代器来确定您在结果集中的位置并相应地附加该类。

class="one_third <?php if($i == $numrows) echo 'column_last'; ?>"
于 2013-07-16T15:31:06.900 回答
0

在您的示例标记中，看起来第三列有一个特定的 CSS 类，将其与其他类区分开来：

class="one_third column_last"

但是您的 PHP 代码没有输出该类的任何内容：

class="one_third"

这主要是基于所提供的有限信息的猜测，但您可能需要div将column_lastCSS 类作为第三列。事实上，你根本没有输出三分之一div。

于 2013-07-16T15:20:10.133 回答