Question

我的HTML存在问题，我的网站上有一个页脚，在页脚中我有三个不同的选项，从左边开始，我有一些小的标识，分别是facebook，twitter和youtube。在中心我有我的网站的版权文本，在右边我有另一个facebook twitter和youtube图标。这是我得到screenshot的问题，每当我拥有版权时，右侧徽标就会从页脚中删除。这是我的代码：

的 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('...');
}

我所做的是：

取走#footerwrapper，而不是我给#footer左边和右边15％的填充。添加box-sizing: border-box也可确保定义的宽度为包含填充（设置时为边框）。
我使用p（在语义上优于div）将页脚分成三部分，然后给它们全部width: 33.33%。第一个自动左对齐，第二个将居中，最后一个在右边。由于所有段落都浮动，我给了父（#footer）一个overflow: auto，因此它知道里面有浮动的项目，阻止它们流出父项。
您可以直接将它们显示为内联块，而不是将链接包装在div中。这样你就不需要额外的（无意义的）div。我还在链接的开始和结束标记之间添加了描述，并确保隐藏文本。

您可以在此处找到演示：JSFiddle。

Answer 2

如果需要，您可以构建自己的网格系统

<强> HTML

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

        <div class="footermiddle left">
            <div style="text-align:center">Copyright goes here</div>
        </div>

        <div class="footerside right" style="width:30%;float:right;">
            <a href="<?php echo $config['twitter']; ?>"><div class="footer-twitter right"></div></a>
            <a href="<?php echo $config['youtube']; ?>"><div class="footer-youtube right"></div></a>
            <a href="<?php echo $config['facebook']; ?>"><div class="footer-facebook right"></div></a>
        </div>
    </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');
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}
.footer-youtube {
    width: 32px;
    height: 32px;
    background: url('../img/icons/youtube.png');
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}
.footer-facebook {
    width: 32px;
    height: 32px;
    background: url('../img/icons/facebook.png');
    display: inline-block;
    margin-top: 16px;
    margin-left: 16px;
    border-radius: 4px;
}

.footerside {
    width:30%;
}

.footermiddle {
    padding-top: 20px;
    width:40%;
}

.right {
    float:right;
}

.left {
    float:left;
}

HTML让项目在div中的左侧，中间和右侧浮动

2 个答案: