不同字体大小的文本底部的两个部分对齐

Question

请参见：demo

我想做的是：水平，将第一个句子放在左侧，然后将另一句话右边。垂直方向，我想将它们对齐到底部。这两个句子不是相同的字体大小。我搜索了此主题一段时间，并认为display:table-cell应该有效，但是您会发现，这两个句子并没有对齐。任何帮助将不胜感激！

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

Answer 1

检查此小提琴

*{
margin:0px !important;
}

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

Answer 2

删除保证金，您将获得所需的输出

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

作为p标签具有这两个规则要添加保证金

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

Answer 3

仅使用此问题来解决您的问题

p{margin:0;}

Answer 4

编写HTML时，您应该知道大多数HTML标签都需要默认的边距和填充。要删除这些边距和填充，您应该使用以下技术之一：

• 使用 CSS RESET [推荐]

• 使用以下CSS

  body, p, h1, h2, h3, h4, h5, h5, h6, form, input, blockqoute { margin: 0; padding: 0; line-height: normal; }

通过使用上述技术，您的HTML元素在交叉浏览器中的行为相同。