2016-07-01 48 views
0

我想從mysql中的數據庫中獲取圖像,然後在3行等中水平顯示它們,我還希望將相關圖像顯示在圖像頂部。我不知道該怎麼做。在我的主要部分繼承我的代碼。如何使用PHP和MySQL水平顯示圖像?

<div class="container" id="content"> 
    <!-- Example row of columns --> 
    <div class="row"> 
     <div class="col-md-4"> 
       <?php do { ?>    

      <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>"> 
      <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" > 
      <p><?php echo $rsMissions['missions_name']; ?></p> 
      </a> 

<?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?> 
</div> 
</div> 

這裏是我的PHP查詢我認爲這是奧爾古德。

<?php 
    require_once('includes/dbconn.php'); 
    $missions_sql = "SELECT missions_id, missions_name, missions_image FROM missions"; 
$missions_query = mysqli_query($dbconn, $missions_sql) or die(mysqli_error()); 
$rsMissions = mysqli_fetch_assoc($missions_query); 

?> 

這是我CSS的有關申報單

.row{ 
    width: 1360px; 
} 

.container{ 
width: 1360px;  
} 

.col-md-4 img { 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
     -o-transition: all 1s ease; 
     -ms-transition: all 1s ease; 
      transition: all 1s ease; 
      padding: 2px; 
      position: relative; 
} 

.col-md-4 img:hover { 
    -webkit-filter: blur(2px); 
    -moz-filter: blur(2px); 
    -o-filter: blur(2px); 
     -ms-filter: blur(2px); 
      filter: blur(2px);  
} 

.col-md-4 p{ 

    -webkit-transition: all 0.9s; 
    -moz-transition: all 0.9s; 
    -ms-transition: all 0.9s; 
    -o-transition: all 0.9s; 
    transition: all 0.9s; 
    visibility: hidden; 
    position: absolute; 

    top: 175px; 
    left: 60px; 
    text-decoration: none; 
    font-size: 60px; 
    opacity: 0; 
    color: #fff; 
    font-family: 'Raleway'; 
} 

.col-md-4:hover p{ 
    opacity: 1; 
    visibility: visible; 
    -webkit-transition: all 0.9s; 
    -moz-transition: all 0.9s; 
    -ms-transition: all 0.9s; 
    -o-transition: all 0.9s; 
    transition: all 0.9s;  
} 
+1

用小提琴或發送給我們關於你的輸出的屏幕截圖。 –

回答

2

您必須在col-md-4類之前放置循環。否則,div不會重複。你不能水平獲取你的圖片。試試下面的代碼,它會適合你。

<div class="container" id="content"> 
<!-- Example row of columns --> 
<div class="row"> 
    <?php do { ?> 
    <div class="col-md-4"> 
     <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>"> 
     <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" > 
     <p><?php echo $rsMissions['missions_name']; ?></p> 
     </a> 
    </div> 
<?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?> 

0

我覺得你把你的代碼在一個錯誤的地方。如果它起作用,請嘗試將其更改爲下面的代碼。

<div class="container" id="content"> 
    <!-- Example row of columns --> 
    <div class="row"> 
     <?php do { ?> 
     <div class="col-md-4"> 
      <a href="missions.php?missions_id=<?php echo $rsMissions['missions_id']; ?>"> 
      <img src="<?php echo $rsMissions['missions_image']; ?>" width="500px" height="350px" > 
      <p><?php echo $rsMissions['missions_name']; ?></p> 
      </a> 
     </div> 
    <?php } while ($rsMissions = mysqli_fetch_assoc($missions_query)) ?> 
</div>