顯示圖像背景1如果div位於左側並顯示背景2如果圖像位於右側？

您好我想知道如果有人能幫助，不能完全肯定這是可能的，但我有一個名爲<div class="scroll">顯示圖像背景1如果div位於左側並顯示背景2如果圖像位於右側？

格滾動裏面的SQL查詢呼應張貼從數據庫用戶評論一個div容器。 div滾動設置爲600px的寬度，所以評論將被安排在這個div從左到右，在每行中有兩個評論框，每個評論框都小於300px，每個評論框都相互對齊。

的意見列出像這樣：

<div class="scroll"> 

comment 1 | comment 2 
comment 3 | comment 4 
comment 5 | comment 6 
</div>

的評論在div「comment_box」

現在

我所做的是把背景圖像到div「comment_box」這一形象被包圍是一個指向左側的指針箭頭，它位於div的左側，但我也想爲右側對齊的評論框添加第二個背景圖像，所以在本例中，評論2，4和6將有不同的背景圖像/箭頭指向div右側的右側。

這是可能的嗎？

感謝

comment box{ 

.wall_post_case_branch { 
    background-image:url(../img/effects/arrow_left.png); 
    background-repeat:no-repeat; 
    background-position: center; 
    height:90px; 
    width:290px; 
    position:relative; 
     border:#ccc 1px solid; 


} 

mysql: 

<?php 
    if(mysql_num_rows($wallposts_set) > 0) { 
     while ($posts = mysql_fetch_array($wallposts_set)) { 
      $age = days_from_date($posts['date_added']); 
      ?> 
      <div class="comment_box"> 
      <?php echo "{$posts['content']}"; ?> 
      </div>

來源

2013-04-25 Bear John

這是什麼都與MySQL呢？ – 2013-04-25 11:26:20

你可以爲'odd'或者'even'記錄添加新的'class'，並給出相應的風格。 – 2013-04-25 11:27:40

有可能對評論進行排序或分類，以便某些內容顯示爲左側，而其他內容則與CSS結合使用，這樣就可以將第二個背景圖像添加到輔助div元素中 – 2013-04-25 11:27:58

我會的while循環前右使變量$i = 0;。

它會用它來定義它應該使用的背景顏色。

然後在while循環中我會使用此代碼：

while ($posts = mysql_fetch_array($wallposts_set)) { 
    $i++; 
    $age = days_from_date($posts['date_added']); 
    echo "<div class=\"comment_box_$i\"> 
    $posts['content']} 
    </div>"; 
    if ($i == 2) 
     $i = 0; 
}

然後框將有2班的區別，左邊的一個將有class="comment_box_1"，而右邊的框中將有class="comment_box_2"。

然後，您可以爲差異框創建CSS。

享受

來源

2013-04-25 11:30:22

你可以這樣做，如下所示。

<?php 
    $i = 0; 
    while ($posts = mysql_fetch_array($wallposts_set)) 
    { 
     $class = ' odd'; 
     if ($i++ % 2 == 0) 
     { 
      $class = ' even'; 
     } 
     echo '<div class="comment_box'.$class.'">'; 
    } 
?>

和css

.odd { background-image:imageone.jpg; } 
.even{ background-image:imagesecond.jpg; }

來源

2013-04-25 11:30:23

謝謝你用這個，但得到一個語法錯誤 – 2013-04-25 11:32:21

我已根據你的條件更新答案 – 2013-04-25 11:32:27

@BearJohn和什麼錯誤是..？ – 2013-04-25 11:32:59

您還可以通過使用CSS這樣做簡單：

:nth-child(even) 
:nth-child(odd)

小提琴與背景顏色，而不是圖像顯示。

http://jsfiddle.net/ingvi/CFMcA/

希望它有助於

來源

2013-04-25 12:54:17 Ingvi

顯示圖像背景1如果div位於左側並顯示背景2如果圖像位於右側？

回答

相關問題