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

浮动在包装上，而不是在图像上。图像显示在彼此下方的原因可能是因为您的图像大于 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;
 }