一个关于Div间距的问题(怎么使用css动态控制二个层的间距)?

雨山 发布于 2012/06/05 08:46
阅读 2K+
收藏 0

    嗯,情况这样的,以前的页面有个问题需要修改。一共是二个Div,上面和下面的数据都是由后台读出来的,当上面Div的数据比较多的时候,就会发生挤到下面的div来。我开始是想直接换行,margin,padding 什么的,可是,当上面的数据比较少时,二个层之间的间距又过大了。想设置成下面的div距上面的div一定的距离(15px),可是试了下,还是弄不出来,特来求助。

    数据较多时,上面的DIV挤到下面来了

    
    根据数据多时的情况,调整了间距后,数据较少时,间距又过大了

  
   

无论数据多少,这个间距是最好的



    网页的基本结构:
    HTML:

   

<div id="pinzhong">
    <ul>
        <li>
            <a href="#热轧">
                热轧
            </a>
        </li>
    </ul>
    <ul>
        <li>
            <a href="#特钢">
                特钢
            </a>
        </li>
    </ul>
</div>
<div id="paizi">
    <table>
        <tr>
            <td>
                ...
            </td>
        </tr>
    </table>
</div>

CSS:

 

#pinzhong {
    margin: 10px 0 10px 0;
    height: 130px;
    background: url(../image/pic_01.gif) left top no - repeat;
}
#pinzhong ul {
    clear: both;
    background: #f8f8f8;
    margin: 2px 0 1px 0;
    width: 800px;
    float: right;
}
#pinzhong li {
    width: 110px;
    float: left;
    padding: 2px 0 2px 10px;
    margin - left: 2px;
    text - align: left;
    background: url(../image/pic_02.gif) 0 9px no - repeat
}
#pinzhong a {
    padding - left: 5px;
    padding - right: 5px
}

#paizi {
    padding - top: 5px;
}
#paizi table {
    margin: 0;
    margin - top: 15px;
}
#paizi td {
    border: 1px solid#eee;
    padding - bottom: 2px
}

我看了下CSS,没把第一div给漂浮起来来,怎么会盖到下面的div上去呢?

 

 

加载中
0
Andre.Z
Andre.Z
把height去掉,然后,上面层的那个图片给个margin-bottom。
0
雨山
雨山

嗯,这里面的height去掉的话,图片就出不来了;

#pinzhong {
    margin: 10px 0 10px 0;
    height: 130px;
    background: url(../image/pic_01.gif) left top no - repeat
}

雨山
雨山
回复 @落舞者 : 好像是这个原因,已经改过来了,谢谢.
落舞者
落舞者
图片不一定要用背景啊,用img标签啊或者里面加个层层里面再写上图片的高度。卡住大小
返回顶部
顶部