如何在PHP和CSS中创建3列？

Question

I am having issues making this work within my website. I have 3 columns in CSS. I am using the class of one_third for the first two columns and one_third column_last for the final column. I have multiple rows:

<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>

Here is my php. It is only outputting two columns as of now. I cannot figure out how to make the last column output correctly. Please help!

<?
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>

<? } ?>
<? } } ?>

Answer 1

Use css float left. That will give column layout for dynamic content. Sample working url available here: http://sugunan.net/demo/float.php

Following is the source code.

<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>

Answer 2

In your example markup, it looks like the third column has a specific CSS class which differentiates it from the others:

class="one_third column_last"

But your PHP code isn't outputting anything with that class:

class="one_third"

This is mostly a guess based on the limited information provided, but you probably need to have a div with the column_last CSS class to be the third column. In fact, you're not outputting a third div at all.

Answer 3

You aren't adding your column_last class to any of the columns.

First, put an iterator on your while loop. Define $i = 0; right before the while loop. Then $i++; right before the while loop ends.

Then you can use this iterator to determine where you are in the results set and append the class accordingly.

class="one_third <?php if($i == $numrows) echo 'column_last'; ?>"