两部分不同字体大小的文本底部对齐 [英] Two part of different font size text bottom aligned

问题描述

请参阅：演示

我想做的是：水平地，把第一句放在左边，把另一个放在右边。垂直，我想把它们对齐到底部。两个句子的字体大小不一样。我搜索这个主题了一会儿，认为 display：table-cell 应该工作，但你看，这两个句子不是底部对齐。

 <$ c> 
 $ c>< div class =di_header> 
< div class =di_h_en>< p>我离开了< / p>< / div> 
< div class =di_h_cn>< p>我是对的< / p>< / div> 
< / div> 
  

CSS

  .di_header {
 display：table; 
 width：100％; 
} 
 
 .di_h_en {
 width：30％; 
 display：table-cell; 
 vertical-align：bottom; 
 text-align：left; 
 border：solid 1px red; 
} 
 
 .di_h_cn {
 width：70％; 
 display：table-cell; 
 vertical-align：bottom; 
 text-align：right; 
 border：solid 1px red; 
} 
 
 .di_h_en p {
 font-size：32px; 
} 
 
 .di_h_cn p {
 font-size：24px; 
} 
  

解决方案

http://jsfiddle.net/tilwinjoy/TkfSx/3/ =nofollow>小提琴

  * {
 margin：0px！important; 
} 
  

您需要删除自动生成的边距。我已经指定了表格单元格的高度，以查看底部对齐的效果

Pls see: Demo

What I want to do is: horizontally, put the first sentence on the left, and put the other one right. Vertically, I want to align them to the bottom. The two sentences are not the same font size. I searched this topic for a while and think display:table-cell should work, but you see, the two sentences are not bottom aligned. Any help will be appreciated!

HTML

<div class="di_header">
    <div class="di_h_en"><p>I'm left</p></div>
    <div class="di_h_cn"><p>I'm right</p></div>
</div>

CSS

.di_header{
    display:table;
    width:100%;
}

.di_h_en{
    width:30%;
    display:table-cell;
    vertical-align:bottom; 
    text-align:left;
    border:solid 1px red;
}

.di_h_cn{
    width:70%;
    display:table-cell;
    vertical-align: bottom;
    text-align:right;
    border:solid 1px red;
}

.di_h_en p{
    font-size:32px;
}

.di_h_cn p{
    font-size:24px;
}

解决方案

check this Fiddle

*{
margin:0px !important;
}

You need to remove the auto generated margins. i've specified the height of your table cells to see the effect of bottom alignment

这篇关于两部分不同字体大小的文本底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！