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

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

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

因为p标记有两个添加边距的规则

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

Answer 2

仅用于解决您的问题

p{margin:0;}

Answer 3

检查此Fiddle

*{
margin:0px !important;
}

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

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元素在跨浏览器中的行为相同。

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

4 个答案: