Question

我的内容将达到不同的高度，我已经逐渐淡入div。我如何推送下面的内容而不是掩盖它？我相信这是一个CSS问题？一个clearfix？我无法解决这个问题，我不确定明确的解决方案应该放在淡化内容的包装上还是下面需要推送的内容？

任何建议或更好的代码编码方式都将受到赞赏。

我的所有代码如下： jQuery的：

$(document).ready(function(){
    $('#secondary a').on('click',function(){
        $('#secondary a').removeClass('active');
        $(this).addClass('active');
    });

function fader(i) {
    $('.panel').stop().fadeTo(500, 0).eq(!i ? i :$(this).index()).fadeTo(500, 1); }
    $("li").on("click", fader);
});  // end document ready

CSS：

#secondary { 
    padding:4% 0 3% 0; 
    list-style-type:none;
    font-family:Tahoma, Geneva, sans-serif;
    width: 100%;
}
#secondary a {
    float:left;
    padding: .5% 2%;
    text-decoration:none;
    color:#1F4B80;
}
#secondary a:hover, #secondary a.active {
    background-color:#1F4B80;
    color:#FFF;
}


#details {
    width: 100%;
    height:auto;
    min-height:300px;
    background:#999;
    border:1px solid red;

}
#details .panel {
    position:absolute;
    width:82.5%;
    padding: 3% 8%;
    margin:0 auto;
    display:none;
    border:1px solid blue;
    background:#999;
}


#links {
    background-color:#FFF;
    padding: 4% 8%;
    overflow:auto;
    width: 84%;
    margin: 0 auto;
    text-align: center;
}
#links div {
    width:225px;
    height:170px;
    margin:1%;
    padding-bottom:2%;
    display: inline-block;
    background-color:#1F4B80;
}

HTML：

<nav>
<ul id="secondary">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Community Profile</a></li>
    <li><a href="#">Online Editions</a></li>
    <li><a href="#">Member Benefits</a></li>
    <li><a href="#">Process</a></li>
    <li><a href="#">Maps</a></li>
    <li><a href="#">How to Get Started</a></li>
</ul>
</nav>

<div id="details">
    <div class="panel"><h2>About Member Organizations</h2></div>
    <div class="panel"><h2>Services</h2></div>
    <div class="panel"><h2>Community Profile</h2></div>
    <div class="panel"><h2>Online Editions</h2></div>
    <div class="panel"><h2>Member Benefits</h2></div>
    <div class="panel"><h2>Process</h2></div>
    <div class="panel"><h2>Maps</h2></div>
    <div class="panel"><h2>How to Get Started</h2></div>
</div>

<div id="links">
    <div><a>Community Profile Samples</a></div>
    <div><a>Visitor Guide Samples</a></div>
    <div><a>Map Samples</a></div>
    <div><a>Association Samples</a></div>
</div>

CSS clearfix / float问题？淡化内容不同的高度而不是降低内容

0 个答案: