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的一边。没有休息布局，我没有得到它。我怎么能这样做？

当添加新的菜单项时，它们应该使菜单上升而不是下来，这就是为什么我需要做我上面所说的。下面的第一张图片说明了我想做的事情以及实际情况（较轻的部分是在较暗的部分，是的，它是移动布局）：

第一张图片：

First Image

第二张图片：

Second Image

请不要使用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/

Answer 2

将position:absolute;和bottom:0px;添加到#header #logo：

#header #logo {
     float: left;
     position: absolute;
     bottom: 0px;
}

应该解决你的问题。您也可以将#header #logo截断为#logo。

Answer 3

我不会使用浮点数，我会使用display:inline-block和vertical-align:bottom

#logo {  
  display: inline-block;
  vertical-align:bottom;
}

#menu {  
  display: inline-block;
  vertical-align:bottom;
}

但你需要设置一些宽度。

我需要从ul

中删除填充

#menu ul {margin-bottom:0px}

示例：http://jsfiddle.net/pLeUD/

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

3 个答案: