CSS 3列页脚，徽标显示不正确

Question

我正在一个网站上工作，我需要一个有3列的页脚，以及页脚左侧的徽标。

我无法正确显示页脚，所有内容都符合要求。

以下是它应该如何显示的示例，以及它当前是如何显示的：

我使用的HTML是：

<div class="footer">
<div class="footer-logo-container">
<img class="footer-logo" src="footer-logo.png" alt="Logo" />
</div>
<div class="footer-content">
<h2>List1</h2>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
</div>
<div class="footer-content">
<h2>List2</h2>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
</div>
<div class="footer-content">
<h2>List3</h2>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ul>
<div class="footer-copyright">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> &copy 2015 Company</p>
</div>
</div>

和我的CSS：

.footer {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #CCCCCC;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    background: #2B2C2E;
}

.footer-logo-container {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    padding-left: 20px;
}
}

.footer-logo {
    line-height: 200px;
    float: left;
    padding-left: 50px;
}

.footer-content {
    width: 200px;
    height: 200px;
    float: left;
    padding: 30px 0 0 30px;
}

.footer-content > h2 {
    font-weight: 900;
    font-size: 18px;
    padding-bottom: 5px;
}

.footer-content > ul {
    list-style-type: none;
}

.footer-content > ul > li {
    display: block;
    float: left;
}

.footer-copyright {
    width: 100%;
}

查看JSFiddle： http://jsfiddle.net/g4srqjzz/

如何整齐地显示所有内容，分为三列，旁边有徽标？

由于

Answer 1

进行以下更改将对您有用。将display:inline-block用于div。

＆＃13;

＆＃13;

.footer {
    background: none repeat scroll 0 0 #2b2c2e;
    bottom: 0;
    color: #cccccc;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    height: 200px;
    position: relative;
    top: 100px;
    width: 100%;
}
.footer-logo-container {
    display: inline-block;
    height: 200px;
    margin-top: 50px;
    padding-left: 20px;
    vertical-align: middle;
}
.footer-content {
    display: inline-block;
    height: 200px;
    padding: 30px 0 0 20px;
    text-align: center;
    vertical-align: top;
    width: 150px;
}
.footer-content > h2 {
    font-size: 18px;
    font-weight: 900;
    padding-bottom: 5px;
}
.footer-content > ul {
    list-style-type: none;
}
.footer-content > ul > li {
    display: block;
}
.footer-copyright {
    width: 100%;
}

＆＃13;

<div class="footer">
<div class="footer-logo-container">
<img class="footer-logo" src="http://placehold.it/200x100" alt="Logo" />
</div>
<div class="footer-content">
<h2>List1</h2>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
</div>
<div class="footer-content">
<h2>List2</h2>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
</div>
<div class="footer-content">
<h2>List3</h2>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ul>
<div class="footer-copyright">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> &copy 2015 Company</p>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

检查更新的代码Here.

Answer 2

在float:left中提及.footer-logo-container并使用上边距进行调整，同时根据您的要求调整宽度

.footer-logo-container {
    margin-top:85px;
    height: 200px;
    padding-left: 20px;
    float:left;
}

此处已更新 jsFiddle

Answer 3

你可能最好用HTML中的包装器对它们进行分组，除了版权块（将它移到“.footer-content”div之外）。

https://jsfiddle.net/g4srqjzz/14/

希望这能解决您的问题。

HTML

<div class="footer">
    <div class="list-wrap"> <!-- Added a wrapper to group branding and lists -->
        <div class="footer-logo-container">
            <img class="footer-logo" src="http://placehold.it/200x100" alt="Logo" />
        </div>
        <div class="footer-content">
            <h2>List1</h2>
            <ul>
                <li>Item1</li>
                <li>Item2</li>
                <li>Item3</li>
                <li>Item4</li>
            </ul>
        </div>
        <div class="footer-content">
            <h2>List2</h2>
            <ul>
                <li>Item1</li>
                <li>Item2</li>
                <li>Item3</li>
                <li>Item4</li>
            </ul>
        </div>
        <div class="footer-content">
            <h2>List3</h2>
            <ul>
                <li>Item1</li>
                <li>Item2</li>
                <li>Item3</li>
            </ul>
        </div>
    </div>

    <div class="footer-copyright"> <!-- leave this block outside of branding and lists wrapper -->
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br /> &copy 2015 Company</p>
    </div>

</div> <!-- remember to close your tag -->

CSS

.footer {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #CCCCCC;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    background: #2B2C2E;
    /* ADDED CODE */
    display: table; /* Need to declare "display table" as parent element to "display table-cell" */
    padding: 40px;
}

.footer-logo-container {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
    padding-left: 20px;
    width: 25%;
}

.footer-logo {
    line-height: 200px;
    /* float: left; */ /* Not required */
    padding-left: 50px;
}

.footer-content {
    width: 25%;
    height: 200px;
    /* float: left; */ /* Not required */
    padding: 30px 0 0 30px;
    /* ADDED CODE */
    display: table-cell; /* Need to declare "display table-cell" as child element to "display table" */
}

.footer-content > h2 {
    font-weight: 900;
    font-size: 18px;
    padding-bottom: 5px;
}

.footer-content > ul {
    list-style-type: none;
    /* ADDED CODE */
    padding: 0; /* remove default ul box padding */
}

.footer-content > ul > li {
    display: block;
    /* float: left; */ /* Not required */
}

.footer-copyright {
    width: 100%;
    /* ADDED CODE */
    display: table-footer-group;
    text-align: center;
}