如何将页脚中的第二列与底部对齐？答案

【问题标题】：How to align my second column in footer to bottom?如何将页脚中的第二列与底部对齐？
【发布时间】：2014-08-13 14:16:58
【问题描述】：

我有一个 2 列的页脚，而第二个我的内容较少，所以我希望它与底部对齐。这里是http://jsfiddle.net/uga8L/

我尝试了vertical-align: bottom;，但没有任何效果。

这是我的html页脚

<footer id="footer">
    <div class="inner">
        <div id="column_1">
            <ul>

            <li><a href="http://ec.europa.eu/index_ro.htm">Comisia europeană</a></li>
            <li><a href="http://ec.europa.eu/enterprise/sectors/electrical/index_ro.htm">Inginerie electrică</a></li>
            <li><a href="http://ec.europa.eu/enterprise/sectors/rtte/index_ro.htm">Echipamente radio şi echipamente terminale de telecomunicaţii (R&TTE)</a></li>
            <li><a href="http://ec.europa.eu/enterprise/policies/single-market-goods/cemarking/professionals/manufacturers/directives/index_ro.htm?filter=14">Instrumente de masură</a></li>
            <li><a href="http://ec.europa.eu/enterprise/policies/single-market-goods/cemarking/professionals/manufacturers/directives/index_ro.htm?filter=12">Joasă tensiune</a></li>
            </ul>
        </div>
        <div id="column_2">
            <ul>
            <li id="footer_logo"><img src="themes/default/images/CE.png"></a></li>
            <li>Aplicarea marcajului european pentru</li>
            <li>compatibilitate electromagnetică - EMC</li>
            </ul>
        </div>
    </div>
</footer>

【问题讨论】：

请直接将相关的 CSS 和 HTML 发布到问题中，而不是直接链接到您的网站（您已经发布了 HTML，这方面做得很好）。此外，提供一个 JSFiddle (jsfiddle.net) 会很有帮助，因为它们会比您的网站持续更长时间，后者可能随时消失。
...jsFiddle.net 也可以。一定要创建一个，但也要在此处包含相关代码。

标签： html css alignment footer

【解决方案1】：

试试这个： http://jsfiddle.net/uga8L/1/

一个主要问题是您没有在此处浮动第二列。您可以使用 display:inline-block 来使用垂直对齐元素。

#column_1, #column_2 {
    display:inline-block;
}
#column_2 {
    vertical-align: bottom;
}

【讨论】：