Question

我希望文本位于页脚的右侧，图像位于左侧。每次我有浮动：右边的“页脚li.pictures”背景颜色消失。

在添加浮动之前：右： http://i57.tinypic.com/2cp9mkj.png

添加浮动后：右： http://i60.tinypic.com/206y1rr.png

HTML：

<div class="events">
    <div class="row">
        <div class="col span-12">
            <footer>

                    <ul class="links">
                        <li class="links"><a href="index.html">Home</a></li>
                        <li class="links"><a href="vendors.html">Vendors</a></li>
                        <li class="links"><a href="events.html">Events</a></li>
                        <li class="links"><a href="location.html">Location</a></li>
                        <li class="links"><a href="volunteer.html">Volunteer</a></li>
                    </ul>       

                    <ul class="pictures">
                        <li class="pictures">
                            <a href="#">
                                <img src="images/insta.png" alt="instagram icon">
                            </a>
                        </li>
                        <li class="pictures">
                            <a href="#">
                                <img src="images/twit.png" alt="twitter icon">
                            </a>
                        </li>
                        <li class="pictures">
                            <a href="#">
                                <img src="images/face.png" alt="facebook icon">
                            </a>
                        </li>
                    </ul>
            </footer>
        </div>
    </div>

</div>

css：

 .row {
    margin: 0 auto;
    clear: both;
}

.col {
    box-sizing: border-box;
    float: left;
    width: 100%;
    margin: 0;
}

body {
    margin: 0px 0;
}

footer {
    background-color:#343434;
    width: 100%;
    margin-top: 20px;
    height: auto;
    font-family: 'billymedium';
    font-size: 23px;
    line-height: 23px;
}

footer a, a:visited {
    color: #b7b7b7;
    text-decoration: none;
}

footer a:hover {
    color: #5a8747;
}

footer img {
    max-width: 30px;
    padding-top: 10px;
    padding-bottom: 5px;
}

footer ul.links, ul.pictures {
    list-style: none;
    margin-top: 0;
    padding: 0; 
}

footer li:first-child {
    display: inline;
    margin-left: 0px;
}

footer li.links {
    display: inline;
    margin-left: 25px;
    float: left;
    padding-top: 15px;
}

footer li.pictures {
    display: inline;
    margin-right: 5px;
    text-align: right;
}

Answer 1

将此CSS添加到样式表应该可以解决问题：

footer {
    overflow: hidden;
}

Answer 2

这是一个清算问题。如果此站点使用框架，您可能会生成.clearfix或.clear类，但基本上它看起来像这样：

.clear {
  clear: both;
}

在“col span-12”div内部将其添加到它结束之前：

<div class="clear"></div>

如果您不想创建课程，这也有效：

<div style="clear:both;"></div>

如何让我的页脚左右浮动？

2 个答案: