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

艾娃

我对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第一个链接中显示的文本为“此处的某些文本” vertical-align:bottom,以便将其定位为第二个链接。当两个链接在一行中时没有问题,但是当第二个文本较长时,它会换行并且它们的位置不好。怎么做?谢谢。

亚历克斯

您可以使用display:inline-block;,而不是float:left;与给予vertical-align: bottom;,以#second-link#first-link不要忘记删除多余的空格这是由发生display:inline-block;

Jsfiddle

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

响应主题中带有垂直对齐的浮动div的环绕式文本

来自分类Dev

垂直对齐2个浮动div,高度灵活

来自分类Dev

将2个浮动div垂直对齐并具有灵活的高度

来自分类Dev

根据浮动图片的高度垂直对齐div中的文本

来自分类Dev

垂直对齐文本并在包含Div的内部浮动

来自分类Dev

根据浮动图像的高度垂直对齐div中的文本

来自分类Dev

如何在中心垂直对齐两个div,在底部保持一个div?

来自分类Dev

如何在中心垂直对齐两个div,在底部保持一个div?

来自分类Dev

将底部div与不同大小的文本垂直对齐

来自分类Dev

如何垂直对齐底部

来自分类Dev

如何在div中垂直对齐2个类

来自分类Dev

如何浮动两个锚链接,水平和垂直对齐文本?

来自分类Dev

Bootstrap 3列,垂直对齐:底部带有img

来自分类Dev

带有左上角边距的浮动框,具有垂直对齐和字体大小的响应文本 div

来自分类Dev

如何设置浮动和非浮动元素垂直对齐到底部

来自分类Dev

浮动时垂直对齐div

来自分类Dev

DIV内部垂直对齐底部UL

来自分类Dev

DIV内部垂直对齐底部UL

来自分类Dev

父项的底部垂直对齐div

来自分类Dev

如何垂直对齐文本?

来自分类Dev

垂直对齐h2底部

来自分类Dev

具有垂直对齐的文本和字幕的圆形div

来自分类Dev

具有垂直对齐的文本和字幕的圆形div

来自分类Dev

css列如何垂直对齐底部?

来自分类Dev

如何在两个div的中间垂直对齐文本

来自分类Dev

如何在两个div的中间垂直对齐文本

来自分类Dev

引导程序如何使文本在div容器中垂直对齐

来自分类Dev

如何垂直对齐div的文本和图像中间?

来自分类Dev

如何在div中居中和垂直对齐文本?

Related 相关文章

热门标签

归档