我有一个div浮动左侧,其中包含比其右侧内容大的文本,但是我希望右侧的文本与浮动div中的文本底部对齐。这是一个JS小提琴,显示了一个示例:
http://jsfiddle.net/cykz8vd0/3/
如您所见,右侧的文本与左侧的字母未对齐。我希望它使右侧文本的第一行的底部与左侧字母的底部对齐。
的HTML
<div class="floatLeft">
A:
</div>
<div class="fill">
Text goes here. I would like it to be aligned nicely with the letter on the left.
<br>
Another line of text here.
</div>
的CSS
.floatLeft{
float:left;
width:20px;
font-size:18px;
font-weight:bold;
}
.fill{
margin-left:25px;
}
到目前为止,我能够完成此操作的唯一方法是通过执行此小提琴中的操作:
http://jsfiddle.net/cykz8vd0/4/
我只是将.fill
CSS更改为:
.fill{
margin-left:25px;
position:relative;
top:3px;
}
top:3px
但是,这并不总是可行的,因为此代码将在具有不同字体的页面上实现。我是否可以通过任何方式以编程方式计算该top
值,因此可以使用JQuery进行设置,或者是否有更好的方法来实现这种对齐?
解决方法如下:
HTML:
<div class="fill">
<div class="floatLeft">A:</div>Text goes here. I would like it to be aligned nicely with the letter on the left.
<br>
Another line of text here.
</div>
CSS:
.floatLeft{
display: inline-block;
width: 20px;
padding-right: 5px;
margin-left: -25px;
text-align: right;
font-size: 18px;
font-weight: bold;
}
.fill{
font-size: 12px;
margin-left:25px;
}
不管是什么,您的标签现在都已与文本基线完美对齐font-size
。JSFiddle:http : //jsfiddle.net/cykz8vd0/6/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句