Question

我遇到了css的问题。我已经创建了这个jsfiddle来展示它 - https://jsfiddle.net/5k92h026/19/

我的代码是：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

我想在蓝色div第一个链接中哪个文本是＆＃34;一些文字在这里＆＃34;为vertical-align:bottom，以便将其定位为第二个链接。当两个链接在一行中时没有问题，但是当第二个文本更长时，它会在新行上进行，并且它们定位不好。怎么做？感谢。

Answer 1

您可以使用display:inline-block;代替float:left;，将vertical-align: bottom;提供给#second-link和#first-link。不要display:inline-block;

发生forget to remove the extra spaces

Jsfiddle

如何纵向对齐：底部2浮动div与文本

1 个答案: