3

如何在不知道高度的情况下将元素与容器底部对齐？我想将“链接” 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 框架，所以在我的案例中，徽标和链接容器都是 Bootstrap 应用 float:left 的列。因为我需要它来响应，所以使用绝对定位对我来说可能不可行。

4

3 回答 3

2

要将.links元素垂直对齐到底部，它应该从文档正常流程中删除。将 a 添加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 演示

于 2013-08-08T18:34:41.927 回答
1

使用 inline-blocks 和 vertical-align 属性

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

.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/

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

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

于 2013-08-08T18:40:43.750 回答
0

尝试放置.links在内部.logo并结合使用相对和绝对定位。

在这里提琴

使用以下样式.links将 div 放置在 div 的底部，.logo同时填充其余 25% 的屏幕宽度。

.links { 
 width:30%;
 float:left;
 position:absolute; 
 font-size: 14px;
 right: -30%; 
 bottom: 0;
}
于 2013-08-08T18:32:33.217 回答