Question

我在img-group中写了包含照片墙的内容。我使用了Bootstrap的澄清。然后我写了一个页脚。但页脚不正常。

我的图片包装器是相对的，页脚是相对的。 Img-group是绝对的。我再次查看位置教程，但我无法弄清楚如何处理这个问题。我要崩溃＆gt;。＆lt;帮助

我的HTML：

    <div id="content">
     <div class="rwrapper">
        <div class="container">
            <h1 class="margintop text-center">Popular Activities</h1>
        </div>
        <div class="img-group">
            <a id="pic1" class="line1" href="activity-single.php?act_id=4">test</a>
            <a id="pic2" class="line1" href="activity-single.php?act_id=12">test2</a>
            <a id="pic3" class="line1" href="activity-single.php?act_id=26">test3</a>
            <a id="pic4" class="line2" href="activity-single.php?act_id=27">test4</a>
            <a id="pic5" class="line2" href="activity-single.php?act_id=31">test5</a>
            <a id="pic6" class="line2" href="activity-single.php?act_id=43">test6</a>
            <a id="pic7" class="line3" href="activity-single.php?act_id=6">test7</a>
            <a id="pic8" class="line3" href="activity-single.php?act_id=5">test8</a>
            <a id="pic9" class="line3" href="activity-single.php?act_id=1">test9</a>
        </div>              
    </div>
</div>
<div class="clearfix"></div>
<div id="footer" class="index">
    <div class="container">
        <div class="wrapper">
            <ul class="list-inline">
                <li><a href=""><i class="fa fa-facebook-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-google-plus-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-twitter-square fa-3x"></i></a></li>
                <li><a href=""><i class="fa fa-pinterest-square fa-3x"></i></a></li>
            </ul>
            <p class="h5 text-center">copyright © 2015 Sports Buddy Group.</p>
        </div>

    </div>  
</div>

我的css：

    /* image group */
    .img-group{
        position: absolute;
        left: 0;
        margin-top: 2%;
        width: 100%;
    }

    .img-group a{
        position: relative;
    }

    .img-group a{
        float: left;
        width: 33.3333333%;
        display: block;
        text-align: center;
        top: 0;
        left: 0;
        text-indent: -999px;
    }

    .img-group a::before{
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 233px;
    }
    .img-group a::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 233px;
        top: 0; 
        left: 0;
        background: rgba(0,0,0,0.45);
        z-index: 10;
    }


    .rwrapper{
        position: relative;
    }

Answer 1

绝对定位的元素不会影响其容器的高度，因为它们会从正常的元素流中移除。见https://developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning。所以，你有两个我能想到的选择。一，给你的rwrapper类应用一个高度。像

.rwrapper{
    position: relative;
    height: 300px; /* <- insert the height you need here
}

但是，如果您不知道自己需要多少空间，那么这个解决方案就不会起作用。我的另一个建议是将所有内容切换为使用position：relative。你似乎没有通过绝对定位获得任何东西，至少在你提供的代码中是这样。

两个连续位置相对不正常

1 个答案: