0

私は奇妙な問題に直面しています。ボタンをクリックすると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');
4

1 に答える 1

0

フロートは画像ではなくラッパーにあります。画像が互いに下に表示される理由は、おそらく、画像が 220px よりも大きいため (または、少なくとも 2 つの画像が隣り合って大きいため)、新しい行から始まるためです。

.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;
 }
于 2013-09-17T17:59:18.890 に答える