javascript - HTML 让元素在 div 的左、中、右浮动

Question

我的 HTML 有一些问题，我的网站上有一个页脚，在该页脚中我有三个不同的选项，首先，在左侧我有小 Logo ，分别是 facebook、twitter 和 youtube。在中心我有我网站的版权文本，在右边我有另一个 facebook twitter 和 youtube 图标。这是我遇到的问题 screenshot ，只要我在那里拥有版权，右侧的 Logo 就会从页脚中消失。这是我的代码:

HTML

<div id="footer">
        <div id="footerwrapper" style="margin-top: 78px">
            <a href="<?php echo $config['twitter']; ?>"><div class="footer-twitter" style="float:left"></div></a>
            <a href="<?php echo $config['youtube']; ?>"><div class="footer-youtube" style="float:left"></div></a>
            <a href="<?php echo $config['facebook']; ?>"><div class="footer-facebook" style="float:left"></div></a>
            <center><div style="padding-top: 24px;">Copyright goes here</div></center>
            <a href="<?php echo $config['twitter']; ?>"><div class="footer-twitter"></div></a>
            <a href="<?php echo $config['youtube']; ?>"><div class="footer-youtube"></div></a>
            <a href="<?php echo $config['facebook']; ?>"><div class="footer-facebook"></div></a>
        </div>
    </div>

CSS

#footer {
    margin-top: 40px;
    background: #21282e;
    height: 60px;
    width: 100%;
    color: #b0b6be;
    font-size: 18px;
    position:relative;
}
#footerwrapper {
    margin: 0px auto;
    width: 70%;
}
.footer-twitter {
    width: 32px;
    height: 32px;
    background: url('../img/icons/twitter.png');
    float: right;
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}
.footer-youtube {
    width: 32px;
    height: 32px;
    background: url('../img/icons/youtube.png');
    float: right;
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}
.footer-facebook {
    width: 32px;
    height: 32px;
    background: url('../img/icons/facebook.png');
    float: right;
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}

有人知道怎么解决吗？谢谢!

Answer 1

我查看了您的代码，发现其中有很多您不需要的元素。所以我重新安排了 HTML 代码(简化了它)。

<div id="footer">
    <p>
        <a class="icon footer-twitter" href="#">Twitter</a>
        <a class="icon footer-youtube" href="#">YouTube</a>
        <a class="icon footer-facebook" href="#>">Facebook</a>
    </p>
    <p>Copyright goes here</p>
    <p>
        <a class="icon footer-twitter" href="#">Twitter</a>
        <a class="icon footer-youtube" href="#">Youtube</a>
        <a class="icon footer-facebook" href="#">Facebook</a>
    </p>
</div>

以及它附带的 CSS:

#footer {
    box-sizing: border-box;
    margin-top: 40px;
    background: #21282e;
    overflow: auto;
    width: 100%;
    padding: 0 15%;
    color: #b0b6be;
    font-size: 18px;
    position:relative;
}
#footer p {
    width: 33.33%;
    float: left;
}
#footer p:nth-child(2) { text-align: center; }
#footer p:nth-child(3) { text-align: right; }


.icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    border-radius: 4px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.footer-twitter {
    background: url('...');
}
.footer-youtube {
    background: url('...');
}
.footer-facebook {
    background: url('...');
}

我所做的是:

1. 去掉 #footerwrapper，取而代之的是我给 #footer 一个 15% 左右的填充。向其添加 box-sizing: border-box 也可确保定义的宽度包含内边距(以及设置时的边框)。
2. 我将页脚分成三部分，使用 p(在语义上比 div 好)，并给它们全部 width: 33.33%。第一个自动左对齐，第二个自动居中，最后一个右对齐。由于所有段落都是 float 的，我给父级(#footer)一个overflow: auto，这样它就知道里面有 float 的元素，防止它们流出 parent 。
3. 您可以直接将它们显示为内联 block ，而不是将链接包装在 div 中。这样你就不需要额外的(无意义的)div。我还在链接的开始和结束标记之间添加了描述，并确保 Conceal 文本。

您可以在此处找到演示:JSFiddle .