css - 将相对定位的 div 与其他 div 的底部对齐

Question

我有以下内容:

HTML(部分):

<div id="page">
        <div id="header">
           <div id="logo">
                <img src="logo.jpg" alt="Logo" />
           </div>
           <div id="menu">
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <!-- how many <li>s as need -->
                </ul>
           </div>
        </div>
        <div id="content">

        </div>
        <div id="footer">

        </div>
</div>

CSS:

html, body {
    min-height: 100%;
}

    #page {
        position: absolute;
        right: 0;
        width: 97%;
        height: 100%;
        overflow-y: auto;
        text-align: center;
    }

        #header {
            position: relative;
            height: auto;
            min-width: 100%;
            margin: 10px auto 0 auto;
            display: inline-block;
            overflow-x: hidden;
        }

            #header #logo {
                float: left;
            }

                #header #menu ul {
                    list-style-type: none;
                }

                    #header #menu ul li {
                        height: 2em;
                        line-height: 2em;
                    }

        #content {
            position: relative;
            margin: 20px auto 0 auto;
            width: 95%;
        }

        #footer {
            position: relative;
            margin-top: 20px;
            width: 100%;
            height: 260px;
        }

解释:

有一个容器 div (#page)。其中有#header、#content 和#footer。 #header 空间在#logo 和#menu 之间水平分割。

问题:

我需要将#menu 放置在#header 的底部，但位于#logo 的一侧。如果没有中断布局，我就无法得到它。我该如何做到这一点？

当添加新的菜单项时，它们应该使菜单向上而不是向下，这就是为什么我需要执行上面所说的操作。下面的第一张图片说明了我想要做什么，第二张图片说明了它的实际情况(较亮的部分位于较暗的部分，是的，这是一个移动布局):

第一张图片:

第二张图片:

请不要使用 JavaScript，只使用纯 CSS。 感谢您的关注，再见。

Answer 1

尝试将#header的显示属性更改为表格，将#logo和#menu的显示更改为“table-cell”并将它们垂直对齐到底部 - 它应该可以满足您的需要

 #header {
        position: relative;
        height: auto;
        min-width: 100%;
        margin: 10px auto 0 auto;
        display: table;
        overflow-x: hidden;
    }

    #logo {
            display:table-cell;
            vertical-align:bottom;
    }

    #menu {display:table-cell; vertical-align:bottom;}

css #header #logo 中的选择器太多了，因为标识符不能重复，所以 #logo 就足够了

这是工作示例:http://jsfiddle.net/6xBvR/1/