如何垂直对齐：带有文本的底部 2 个浮动 div

Question

我对 css 有疑问。我创建了这个 jsfiddle 来展示它 - https://jsfiddle.net/5k92h026/19/

我的代码是：

.left {float:left}
.wrapper{width:690px;}
.first-div {background-color:red;width:334px;height:84px;}
.second-div {
    background-color:blue;
    width:300px;
    height:84px;
    padding:33px 20px 35px 23px;
}
#first-link {
    padding-right:10px;
    display:block;
    float:left;
    vertical-align:bottom;
}
#second-link {
    padding-left:10px;
    display:block;
    float:left;
    border-left: 1px solid black;
    width:50%;
}

<div class="wrapper">
    <div class="left first-div">some info</div>
    <div class="left second-div" style=" display:inline-block;">
            <div class="search-info"></div>
            <a id="first-link" href="">some text here</a>
            <a id="second-link" href="" class="">some text that goes in 2 rows here</a>
    </div>
</div>

我希望蓝色 div 第一个 link 文本是 "some text here" 是 vertical-align:bottom，这样它将被定位为第二个 link。当两个 link 在一行中时没有问题，但是当第二个文本较长时，它会换行并且它们的位置不好。怎么做？谢谢

Answer 1

您可以使用 display:inline-block; 代替 float:left;，并将 vertical-align: bottom; 赋给 #second-link 和 #first-link。不要 forget to remove the extra spaces 由 display:inline-block;

发生

Jsfiddle

如何垂直对齐：带有文本的底部 2 个浮动 div

How to vertical-align:bottom 2 floated divs with text

css

position

vertical-alignment