-8 
<?php 
  $result1 = db_getarticles( array('campaigns_id' => $SYS_campaign) );
  if (!is_null($result1)) { 
    while ( $row = $result1->fetch_object() ) {
?>

<div class="section">
<div class="leftinfo" style="height:178px;width:408;" >
<?php
      echo "<img style='height:178px;width:402px;' src='$SYS_folder/images/articles/$row->imagearticle' alt=''   />"; 
?>
  </div>
  <div class="rightinfo">
  <strong> 
<?php 
      echo $row->titlearticle; 
?>
</strong></br>
<?php 
      echo $row->descparticle; 
?>
</div>
<div class="clear">
</div>
<div class="seperator"></div>
</div>
<?php 
    }
  } 
?>

您好，我想在左侧图像和右侧图像上交替显示图像和描述 1 记录。有什么可以帮助我的吗？谢谢。

4

2 回答 2

1

据我了解，您是在询问如何确定用于应用不同样式的备用 div。

您应该使用 CSS 类来为 div 提供替代效果。

.section{width:500px; height:200px;}
.rightinfo{ float : right; }
.leftinfo{ float : left; }
.section img{width:402px; height:178px;}

在while循环之前的PHP代码中有一个变量

$style = 0;

并在 while 循环中递增并检查值（奇数/偶数）以应用正确的类。

$style++;
if($style % 2 == 0){
    $imgClass = 'leftinfo';
    $descClass = 'rightinfo';
} else {
    $imgClass = 'rightinfo';
    $descClass = 'leftinfo';
}

将这些类分配给您的 HTML 元素。

<div class="<?php echo $imgClass; ?>"> .... </div>
<div class="<?php echo $descClass; ?>"> .... </div>

示例小提琴

于 2013-07-30T07:37:08.033 回答
0

更新

看到你是什么后尝试以下：

  • 为节类添加类变量

  • 使用那里的三元运算符来设置它。

  • 使用 CSS 更改定位。

如果您需要更改布局，这将使 CSS 更加负责定位，并且可能会减少重构 php 代码。

<?php 
  $sectionClass = "" #new class for section
  $result1 = db_getarticles( array('campaigns_id' => $SYS_campaign) );
  if (!is_null($result1)) { 
    while ( $row = $result1->fetch_object() ) {
       #set section class as needed
       $sectionClass = ($sectionClass == "section" ? "section alt" : "section"); 
?>

<div class="<?php echo $sectionClass ?>">    
<?php
      echo "<img  src='$SYS_folder/images/articles/$row->imagearticle' alt=''   />"; 
?>

  <div class="info">
  <h2> 
<?php 
      echo $row->titlearticle; 
?>
</h2>
<?php 
      echo $row->descparticle; 
?>
</div>
</div>
<?php 
    }
  } 
?>

现在使用以下 CSS：

.section{width:500px; height:200px; clear:both;}

.section img{width:402px; height:178px;float:left}
.section .info {float:right}

/*Swap Position Of image and description*/
.section.alt img{float:right}
.section.alt .info {float:left; }

来自 HTML 的示例：http: //jsfiddle.net/FttQ5/3/

结束更新

如果将来，请在解决您的问题方面付出更多努力。

我曾经display:inline-block给你你的2列。inline-block请参阅有关使用over的利弊的文章floats

更改您的 php 以生成以下 HTML

<div class="section">
    <div class="leftinfo">
        <img style='height:178px;width:402px;' src='' alt='' />
    </div>
    <div class="rightinfo"> <strong>Title 1</strong>
        <br />Dscription 1</div>
</div>
<div class="section">
    <div class="leftinfo" >
        <img style='height:178px;width:402px;' src='' alt='' />
    </div>
    <div class="rightinfo"> <strong>Title 2</strong>
        <br />Dscription 2</div>
</div>

现在添加以下 CSS

.section {
position:relative;
margin-bottom:5px;
}

.section .leftinfo, .section .rightinfo {
    display:inline-block;
    vertical-align:top;
}

.leftinfo{ height:178px;width:408;}

示例：http: //jsfiddle.net/FttQ5/1/

请注意，您最好将您的标题放在适当的hx标签中，例如h1....h6并且图像可以使用 CSS 类进行样式设置。例如：

.section img {height:178px;width:402px; }

此外，根本没有理由将图像包裹在 adiv中

稍微优化的例子：http: //jsfiddle.net/FttQ5/2/

于 2013-07-30T06:57:17.613 回答