Question

我使用php在引导图像轮播中显示图像。如何重组代码以在图像下方显示“ banner_title”？当前在图像上方显示“ banner_title”。

我曾尝试使用CSS放置字幕文本。

$output .= '
   <img src="banner/'.$row["banner_image"].'" alt="'.$row["banner_title"].'" />
   <div class="carousel-caption">
    <h3>'.$row["banner_title"].'</h3>
   </div>
  </div>

我已经尝试过使用像这样的css

$output .= '
   <img src="images/'.$row["banner_image"].'" alt="'.$row["banner_title"].'" />
   <div class="carousel-caption">
    <h3>'.$row["banner_title"].'</h3>
   </div>
  </div>
  ';
  $count = $count + 1;
 }
 return $output;
}

?>
<!DOCTYPE html>
<html>
 <head>
  <title>Abc LiquorMart Deals</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
h3 {color: white; font-size: 14px; float: left;}
body {background-color: black;}
h2   {color: white;}

Answer 1

尝试下面的代码段，如果有错误，请在下面发表评论，

$output .= '
   <img src="banner/'.$row["banner_image"].'" alt="'.$row["banner_title"].'" />
   <div class="carousel-caption">
    <h3 style="float:left;">'.$row["banner_title"].'</h3>
   </div>
  </div>

Answer 2

如果这只是标准的Bootstrap v4 Carousel，则可以覆盖CSS position属性以将标题置于底部

.carousel-caption {
  position: static;
  background: grey; /* You'll want to set this to something */
}

JSFiddle Demo

如何修复PHP输出

2 个答案: