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

在 .footer-logo-container 中提及 float:left 并调整上边距并根据您的要求调整宽度

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

此处更新jsFiddle

Answer 2

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

.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%;
}

<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>

检查更新后的代码 Here.

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;
}

CSS 带有徽标的 3 列页脚显示不正确

CSS 3 column footer with logo displaying incorrectly

html

css

footer