javascript - Onclick 将图像添加到 jQuery 中的 div

Question

我遇到了一个奇怪的问题。当我点击带有 id="fashion" 的按钮时，我将图像写入一个 div cashback_merchant。这里我指定了 float:left。但是我的图片没有跟随这部分，而是一张一张地显示在另一张下方。

这是 CSS 部分:

<style>
  .cashback_merchant {
      height: 100px;
      width: 220px;
      float: left;
      padding: 10px;
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 10px;
 }
</style>

这是我的 HTML:

<div class="cashback_merchant">
</div>

这是我的 ajax 部分:

 $.post('get_category', data = { type : 'Fashion' }, function( data ) {
    $.each( data, function( item, i) {
        var image_path = "<?php echo base_url();?>assets/images/"+i.image_name;                         
        $(".cashback_merchant").hide().append('<img class = "image" 
        src="'+image_path+'"/>').fadeIn('slow');        
    });                                   
 },'json');

Answer 1

float 在包装上，而不是在图像上。图像显示在彼此下方的原因可能是因为您的图像大于 220 像素(或者至少有两个相邻的图像更大)，因此它从一个新行开始。

.cashback_merchant .image
  {
   float:left;
 }

或者如果全类都在看图片:

.cashback_merchant .image
  {
  height: 100px;
  width: 220px;
  float:left;
  padding:10px;
  margin-left:10px;
  margin-top:10px;
  border-radius:10px;
 }