Question

我使用jquery手风琴来构建我的列表，但我的问题是“空白区域在h3和内容之间“。我在h3中使用了css margin但效果不好，任何解决方案或资源都会有所帮助。

这是我的代码：

css文件：

#accordion h3{

   background: url("<?php echo $baseUrl; ?>/images/cat-title-closed.png") no-repeat scroll center center transparent;
    color: #666666;
    font-family: DroidKufi-bold;
    font-size: 18px;
    height: 36px;
    text-shadow: 0 0 0 gray;
    width: 724px;
    padding-right: 9px;


    position : relative;
    top : -Npx;



   }

  #accordion h3.ui-state-active {
   background: url("<?php echo $baseUrl; ?>/images/cat-title-open.png") no-repeat scroll center center transparent;
    color: #CC0000;
    font-family: DroidKufi-bold;
    font-size: 18px;
    height: 36px;


    text-shadow: 0 0 0 gray;
    width: 724px;
}


   #accordion2 h3{

    background: url("<?php echo $baseUrl; ?>/images/course-title-closed.png") no-repeat scroll center center transparent;
    color: #666666;
    font-family: DroidKufi-regular;
    font-size: 14px;
    height: 28px;


    text-shadow: 0 0 0 gray;
    width: 706px;



   }

   #accordion2 h3.ui-state-active {
   background: url("<?php echo $baseUrl; ?>/images/course-title-open.png") no-repeat scroll center center transparent;
    color: #CC0000;
    font-family: DroidKufi-bold;
    font-size: 14px;
    height: 28px;

    text-shadow: 0 0 0 gray;
    width: 706px;
}

php文件：

.....
<script type="text/javascript">
    $(document).ready(function(){


        $("#accordion #accordion2").accordion({

             collapsible: true, active: true,
            autoHeight: false,

        });







   /////////// end 
    });

....

 <!--  Start print events realted to courent trainer  -->
<?php



echo "<div id='accordion'>
    <h3><span lang='ar-sy'>الجدول التدريبي</span></h3>

    <div >";



   foreach($events as $valuec){
      $course=$valuec->course->name_ar;
        $intro=strip_tags( substr($valuec->course->intro,0,235));
   $time=$valuec->course->t_time;
   $money=$valuec->course->price;
    echo "<div id='accordion2'>
                <h3><span class='title' lang='ar-sy'>$course</span></h3>


                <div>
                <p>
        <table border='0' width='100%' cellspacing='0' cellpadding='0' class='course_accordion'>
                        <tr>
                            <td class='course-img'>
                            <img border='0' src='../images/course-img.jpg' width='200' height='135'></td>
                            <td valign='top'>
                            <table border='0' width='100%' cellspacing='0' cellpadding='0'>
                                <tr>
                                    <td class='course-brief'>
                                    <p align='justify'>
                                     $intro ....
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    <table border='0' width='100%' cellspacing='0' cellpadding='0'>
                                        <tr>
                                            <td class='course-price-time'>$time ساعة
                                            | $money دولار</td>
                                            <td>
                                            <div class='reg-now'>";
                                             echo CHtml::link('مزيد من المعلومات',array('site/coursedetalis','id'=>$valuec->course_id));


                                                 echo "</div>
                                            <div class='reg-now'>";

     echo CHtml::link('التسجيل',array('site/cregister','event_id'=>$valuec->event_id));                                          

                                            echo "
                                            </div>
                                            </td>
                                        </tr>
                                    </table>
                                    </td>
                                </tr>
                            </table>
                            </td>
                        </tr>
                            </table>
</p>
</div>
</div>
";
}

截图： accordion

Answer 1

如果没有一个jsfiddle，那就太多了，不知道是什么导致了这个空间。除此之外，我强烈建议您尝试使用Firebug或Chrome中的开发人员工具 - 加载页面并使用CSS / Layout选项卡（在Chrome中称为Metrics）并单击html以查找违规元素。 Firebug特别适用于颜色编码填充，边距以及您选择的整个框的轮廓。

这应该可以帮助您找到空间，甚至可以找到解决方法。

删除标题和内容div之间的空白区域

1 个答案: