jquery - 删除标题和内容 div 之间的空白

Question

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

这是我的代码：

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

截屏：

Answer 1

如果没有 jsfiddle，要想了解导致空间的原因就有点太多了。除此之外，我强烈建议您尝试使用 Firebug 或 Chrome 中的开发人员工具 - 加载页面并使用 CSS/Layout 选项卡（在 chrome 中称为 Metrics）并在 html 周围单击有问题的元素。Firebug 尤其擅长使用颜色编码填充、边距和您选择的整个框的轮廓。

这应该可以帮助您找到空间是什么，甚至可能如何修复它。