1

私のウェブサイト内でこれを機能させるのに問題があります。CSSに3つの列があります。最初の 2 つの列には 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です。現在、2 つの列のみを出力しています。最後の列を正しく出力する方法がわかりません。助けてください！

<?
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 float left を使用します。これにより、動的コンテンツの列レイアウトが提供されます。ここで利用可能なサンプルの作業 URL: 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

マークアップの例では、3 番目の列に特定の CSS クラスがあり、他の列と区別されているように見えます。

class="one_third column_last"

しかし、あなたの PHP コードはそのクラスで何も出力していません:

class="one_third"

これは提供された限られた情報に基づいた推測にすぎませんが、3 番目の列にするには、おそらく CSS クラスを使用するdiv必要があります。column_last実際、3分の1divをまったく出力していません。

于 2013-07-16T15:20:10.133 に答える
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 に答える