使用jQuery來顯示圖像

Question

我試圖在一行中顯示三個圖像。例如，我試圖讓頁面看起來像這樣（我手動繼續並輸入了所有我想要得到的html）：http://imgur.com/AsizGyy

但是當我嘗試使用jQuery將圖像追加到嘗試使它看起來像它在以前的屏幕截圖中，它顯示如下：http://imgur.com/Vkt4ljH

很明顯，這是不同於我希望它是如何。

這裏是我的代碼（HTML和jQuery的兩者）

<div class="w3-container" id="album-header" style="display: none;"> 
    <h4 class="w3-text-black"></h4> 
</div> 

<div class="w3-row-padding w3-margin-top" style="display: none;"> 
    <div class="w3-third"> 
     <div class="w3-card-2" id="palbums"> 
      <!-- image here --> 
     </div> 
    </div> 
</div> 

$('#album-name').on('change', function() { 
    // retrieve the images from the photo album selected 
    $.ajax({ 
     type: "POST", 
     url: "/members/profile/get-photos-from-album", 
     dataType: "json", 
     data: { 
      album_name: $('#album-name option:selected').val() 
     } 
    }).done(function(msg) { 
     if (msg.photos == undefined) { 
      $('#no-album-photos .w3-col m12').attr('style', 'display: initial;'); 
      $('#no-album-photos .w3-col m12 ').html("<p>No photos were found in the album</p>"); 

      return false; 
     } else { 
      $('#album-header').attr('style', 'display: initial;'); 

      $('#album-header h4').html("Photos in " + $('#album-name option:selected').text().split("_")[0] + ":"); 

      $('.w3-row-padding .w3-margin-top').attr('style', 'display: initial;'); 

      $.each(msg.photos, function(i, item) { 
       $('div.w3-third').find('.w3-card-2').append('<img src="<?php echo $this->basePath() . '/images/profile/' . $this->identity() . '/albums/'; ?>' + $('#album-name option:selected').val() + '/' + msg.photos[i] + '" style="width: 100%;">'); 
      }); 
     } 
    }).fail(function(msg) { 
     alert(msg); 
    }); 
}); 

我知道這個問題是$。每個函數中，但我就如何解決這一問題（虧損搜索任何問題後，或如何完成這個教程，但不幸的是沒有運氣）。

的HTML我想獲得這將是這樣的：

<div class="w3-row padding w3-margin-top"> 
    <div class="w3-third"> 
     <div class="w3-card-2"> 
      <!-- image here --> 
     </div> 
    </div> 

    <div class="w3-third"> 
     <div class="w3-card-2"> 
      <!-- image here --> 
     </div> 
    </div> 

    <div class="w3-third"> 
     <div class="w3-card-2"> 
      <!-- image here --> 
     </div> 
    </div> 
</div> 
<!-- after 3 in a row --> 
<!-- make a new row --> 
<div class="w3-row padding w3-margin-top"> 
    <div class="w3-third"> 
     <div class="w3-card-2"> 
      <!-- image here --> 
     </div> 
    </div> 

    <div class="w3-third"> 
     <div class="w3-card-2"> 
      <!-- image here --> 
     </div> 
    </div> 

    <div class="w3-third"> 
     <div class="w3-card-2"> 
      <!-- image here --> 
     </div> 
    </div> 
</div> 

任何幫助，將不勝感激。如果需要更多信息，我可以嘗試發佈更多信息。

謝謝！

Answer 1

您正在堆砌您的DIV的這將創建列，以便您的代碼工作正常，這是你的HTML錯誤。你可以使用float: left做到這一點

<div class="w3-row padding w3-margin-top"> 
    <div class="w3-third" style="float: left"> 
     <div class="w3-card-2"> 
      Image1 
     </div> 
    </div> 

    <div class="w3-third" style="float: left"> 
     <div class="w3-card-2"> 
      Image2 
     </div> 
    </div> 

    <div class="w3-third" style="float: left"> 
     <div class="w3-card-2"> 
      Image3 
     </div> 
    </div> 
</div> 

FIDDLE

或CSS它

.w3-third { 
    float: left; 
    max-height: 200px; 
} 
img { 
    max-height: 150px; 
    padding-bottom: 10px; 
} 

Answer 2

嘗試使用$ .each函數更新行。看起來像 在div.w3-third內循環，而不是div.w3-行。

$(this).append('<div class="w3-third"><div class="w3-card-2"><img src="<?php echo $this->basePath() . '/images/profile/' . $this->identity() . '/albums/'; ?>' + $('#album-name option:selected').val() + '/' + msg.photos[i] + '" style="width: 100%;"></div></div>'); 

雖然這不是構建HTML使用jQuery的最好的實現。

您不需要每次都有新的行。如果你的css class .w3-third我認爲是你行的三分之一。你必須像這樣

CSS

.w3-third { 
    width: 33.3%; 
    float: left; 
} 

設置圖像包裝

.w3-card-2 { 
     height: 240px; 
     margin-bottom: 15px; 
    } 

OR

.w3-card-2, .w3-card-2 img { 
     height: 240px; 
} 

希望這有助於高度。

Answer 3

.w3-third { 
float: left; 
width:30%; 
max-height: 200px; 
pading:0; 
} 
img { 
width:100%; 
margin-left:0; 
margin-right:0; 
max-height: 150px; 
padding-bottom: 10px; 
}