Question

如何在不知道高度的情况下将元素与容器底部对齐？我想将“链接”div容器对齐到底部，以便它与徽标文本底部对齐。我无法设置高度，因为用户可以更改徽标大小，它可能是图像......

以下是代码：

<div class="wrapper">
    <div class="logo">
        <a href="#">LOGO HERE</a>
    </div>

    <div class="links">
        <a href="#">LINK 1</a>
        <a href="#">LINK 2</a>
        <a href="#">LINK 3</a>
    </div>
</div>

.wrapper { width:100%; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.logo { width:75%;float:left;font-size:100px;}
.links { width:25%;float:left;position:relative;}

http://jsfiddle.net/Lejpr/

我应该补充一点，我正在使用Twitter Bootstrap框架，所以在我的案例中logo和链接容器都是Bootstrap应用float的列：left to it。由于我需要这个响应，使用绝对定位可能对我不可行。

Answer 1

要将.links元素垂直对齐到底部，它应该从文档正常流程中删除。将position: relative添加到.wrapper，将position: absolute添加到.links。

不需要浮动.logo元素;但如果需要的话。将overflow: hidden; css声明添加到其父级。在这种情况下.wrapper。

此外，您可以将margin-right设置为.logo元素，以便在.links附近正确显示

<强> CSS：

.wrapper {
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background-color: gold;
    position: relative;
}

.logo {
    font-size:100px;
    margin-right: 25%;
}

.links {
    width:25%;
    background-color: orange;
    position: absolute;
    bottom: 0;
    right: 0;
}

<强> JSFiddle Demo

Answer 2

使用内联块和垂直对齐属性

这是使用绝对定位的替代方法：

.wrapper {
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    outline: 1px solid blue; /* for demo only*/
}
.logo {
    width:74%; /* allow 1% for any white space between logo and links */
    font-size:100px;
    outline: 1px solid blue; /* for demo only*/
    display: inline-block;
    vertical-align: bottom;
}
.links {
    width:25%;
    position:relative;
    outline: 1px solid blue; /* for demo only*/
    display: inline-block;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/YbqUz/

内联块得到了相当好的支持，因此这可能是一个可行的选择。

根据您希望布局如何响应较小的屏幕宽度，您可以可能想为链接块设置最小宽度。

Answer 3

尝试将.links置于.logo内，并使用相对和绝对定位的组合。

Fiddle Here

对.links使用以下样式会将div放在.logo div的底部，同时填充屏幕宽度的25％。

.links { 
 width:30%;
 float:left;
 position:absolute; 
 font-size: 14px;
 right: -30%; 
 bottom: 0;
}

CSS将元素垂直对齐到底部而没有父级的高度

3 个答案:

使用内联块和垂直对齐属性