Question

<?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记录。可以帮助我吗？感谢。

Answer 1

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

您应该使用CSS类来赋予div交替效果。

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

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

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

Example Fiddle

Answer 2

<强>更新

在看完你的内容之后，请尝试以下方法：

为节类
使用三元运算符进行设置。
使用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而不是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类对图像进行样式设置。 E.g：

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

此外，没有理由将图像包裹在div

中

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

如何交替显示div

2 个答案: