Question

我的页脚有问题，我想把我的图像放高，以便它的底部甚至可以使用版权信息。我正在使用HTML 5和CSS 3，该图像低于版权信息，我已经尝试了所有我能想到的图像，使图像浮动到我能想到的地方，现在我要求你们帮忙。

这是我的HTML

<div class="main-footer">
<div class="footer">
    <article class="contact-us">
        <h2>CONTACT US</h2><br>

        <p>Email: <a href="#">
        info@#</a></p><br>
        <p>Personnel Network Incorporated<br>
        address <br>
        address</p><br>
        <p>Phone: </p><br>                      

        <footer class="copyright">
            <p>Copyright &copy; 2013 Personnel 
            Network, Inc. All rights reserved.</p>
        </footer>

        <img alt="PNI logo" src="Images/pni-logo.jpg">  

    </article>  
</div>

这是css

    .footer {
    color: #729AA9;
    width: 70%;
    margin: auto;
    overflow: hidden;
}

.contact-us {
    width: 60%;
    float: left;
    margin: 2% 3%;
}

.contact-us a {
    color: #1C5ACB;
}

.copyright {
    background-color: black;
    width: 70%;
    float: left;
}

.contact-us img {
    width: 230px;
    height: 80px;
    float: left;
}

Answer 1

您可以将版权和图片垂直对齐到底部，以便版权的底部和图片的底部对齐：

更新了CSS：

.contact-us div {
    vertical-align: bottom;
}

.copyright {
    background-color: black;
    width: 40%;
    vertical-align: bottom;
    display: inline-block;
}

.contact-us img {
    width: 230px;
    height: 80px;
    vertical-align: bottom;
    display: inline-block;
}

更新了HTML：

<div class="footer">
    <article class="contact-us">
        <h2>CONTACT US</h2><br>

        <p>Email: <a href="#">
        info@#</a></p><br>
        <p>Personnel Network Incorporated<br>
        address <br>
        address</p><br>
        <p>Phone: </p><br>                      

        <div class="footer-wrapper-class">
            <footer class="copyright">
                <p>Copyright &copy; 2013 Personnel 
                Network, Inc. All rights reserved.</p>
            </footer>

            <img alt="PNI logo" src="Images/pni-logo.jpg">  
        </div>

    </article>  
</div>

这实际上会将您的版权降低到与图像底部相同的高度（而不是向上移动图像）。如果这个太低，你可以添加这个CSS：

.footer-wrapper-class {
    margin-top: -10px; // Set this to whatever amount you want to move them up
}

JSFiddle：http://jsfiddle.net/JZW7X/

如何将图像排列到页面底部？

1 个答案: