css - 如何垂直对齐 :bottom 2 floated divs with text

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 中第一个链接的文本是“some text here”是 vertical-align:bottom，这样它将被定位为第二个链接。当两个链接在一行中时没有问题，但是当第二个文本较长时，它会换行并且它们的位置不好。 怎么做？谢谢。

Answer 1

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

发生的

Jsfiddle