Question

如何使用CSS对齐以下代码？我以前在我的HTML标签中有所有对齐，但我试图看看如何使用CSS完成。

这是我设想的布局：

http://i.imgur.com/GGgqvpt.png

这是一个包含HTML和CSS的jsfiddle：http://jsfiddle.net/4yX4A/

正如您所看到的，我希望徽标完全位于页脚元素中。我希望地址元素与顶部/左侧对齐，我希望链接在顶部/右侧对齐。社交媒体链接/图像将右/右对齐。

在我看来，CSS对齐比HTML更令人困惑，但我听说如果你掌握它，它会使网站的管理变得更加容易。

有人有任何技巧吗？我甚至正确地使用我的HTML吗？

TIA

<div id="footer">

    <div id="contact_links">
        <nav>
            <ul>
                <li><a href="contact"><span>Web Director</span></a></li>
                <li><a href="contact"><span>Office</span></a></li>
            </ul>
        </nav>
    </div>

    <div id="social">
        <ul>
            <li>
                <a href="http://www.facebook.com/mypagejohndoe">
                    <img width="27" height="27" alt="Facebook" src="img/icon_facebook.png">
                </a>
            </li>
        </ul>
    </div>

    <div id="logo-img">
        <img src="images/logo.png" alt="Company" title="Logo" height="150px" width="150px"     />
    </div>

    <div id="address">
        <span class="title">Office</span>
        <br>
        <span class="info">PO Box 0000</span>
        <br>
        <span class="info">Someplace, XX  00000</span>
        <br>
        <span class="info">(555) 555-5555</span>
        <br>
    </div>

</div>

Answer 1

使用float：left。设置div的宽度和左边距。

或者，你可以使用display：inline-block;

#footer div {
    float: left;
    width: 20%;
    margin-left: 1em;
}
#footer div:first-child {
    margin-left: 0;
}

如何使用CSS对齐页脚div中包含的多个div？

1 个答案: