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

浮动在包装器上，而不在图像上。图像显示在彼此之下的原因很可能是因为你的图像比220px大（或者至少两个nexto彼此更大）所以它从一个新的行开始。

.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;
 }

Onclick在jQuery中将图像添加到div中

1 个答案: