如何交替顯示div

-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條記錄。有什麼能幫助我嗎？謝謝。如何交替顯示div

來源

2013-07-30 user2595130

請讓你的代碼再次重新縮進它 – 2013-07-30 06:30:33

我有一個代碼格式化 – user2595130

這個圖像和說明現在動態iscoming做得更可讀的顯示另一個之後，但iwant交替地顯示它像...左邊的第一張唱片和右邊的唱片以及第二張唱片的副本a – user2595130

據我瞭解，你問如何確定應用不同風格的備用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

來源

2013-07-30 07:37:08

更新

在看到你正在嘗試以下後：

添加類變量的部分類
使用有三元運算符來設置。
使用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：從HTML

.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; }

例子：http://jsfiddle.net/FttQ5/3/

末更新

如果將來請出示在解決你的問題更多的努力。我使用display:inline-block爲您提供2列。請參閱在floats

使用 inline-block的利弊的文章

更改你的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; }

而且更沒有理由對圖像中div在所有

略優化例如包裹：http://jsfiddle.net/FttQ5/2/

來源

2013-07-30 06:57:17

如何交替顯示div

回答

相關問題