如何将我的第二列在页脚到底部对齐?

时间:2014-06-23 13:48:05

标签: html css alignment footer

我有一个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>

1 个答案:

答案 0 :(得分:0)

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

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

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